Share
Scommetto che molti di voi non si rendono conto che possiamo creare l'illusione delle forme usando il 100% di CSS. Utilizzando la proprietà border in modo creativo, possiamo creare poligoni davvero interessanti. In questa settimana screencast, troveremo un modo per creare fumetti senza ricorrere alle immagini di sfondo.
La maggior parte di noi, ormai, ha familiarità con l'uso delle proprietà "-moz-border-radius" e "-webkit-border-radius" per creare angoli arrotondati - o anche cerchi completi - ma ci sono altre tecniche per creare forme più complicate.
blockquote # one width: 250px; sfondo: # e3e3e3; imbottitura: 25px; posizione: relativa; #one .arrow width: 0; altezza: 0; altezza della linea: 0; border-top: 30px solid # e3e3e3; border-left: 60px solido bianco; border-right: 10px solido bianco; posizione: assoluta; fondo: -30px; a destra: 30 px;
Nota come la proprietà "bottom" è la reciproca della proprietà "border-top".
blockquote # two width: 250px; sfondo: # e3e3e3; imbottitura: 25px; posizione: relativa; blockquote # two .arrow width: 0; altezza: 0; altezza della linea: 0; border-top: 40px solid # e3e3e3; border-left: none; border-right: 30px solido bianco; posizione: assoluta; fondo: 60%; a destra: -30px;
blockquote # three width: 450px; sfondo: # e3e3e3; imbottitura: 25px; posizione: relativa; #three .arrow width: 0; altezza: 0; altezza della linea: 0; border-bottom: 25px solid # e3e3e3; border-right: 50px bianco solido; posizione: assoluta; inizio: -24px; a sinistra: 20px;
Sto scrivendo questo paragrafo minuti prima di postare il tutorial. Ho imparato qualcosa stasera. Lo sapevi che, se vuoi che il tuo documento venga convalidato, non puoi posizionare il testo direttamente in un blocco? Ha bisogno di essere annidato all'interno di un elemento genitore - come il
etichetta. Inoltre, il validatore non ha gradito il fatto che ho usato un tag span all'interno del blocco. Tiene conto una pletora di elementi, ma sfortunatamente non la portata! Oh bene; nessun grosso problema. Basta sostituirlo con un elemento diverso. Difficilmente fa la differenza.
Sono davvero desideroso di vedere come voi ragazzi avete implementato questo trucco unico nei vostri progetti. Inviaci i link ai tuoi esempi, tramite i commenti. Grazie per la visione. La prossima settimana, pianifica di imparare qualcosa di molto più avanzato ... Ho solo bisogno di capire cosa! Fino ad allora.
Accentsconagua