Come iniziare con le forme CSS

Il web è stato in genere un luogo di riquadri e rettangoli, ma una specifica CSS emergente sta per cambiarlo. In questo articolo ti presenterò le forme CSS, spiegando quali sono e i concetti base di cui hai bisogno per iniziare a usarli.

Tutti gli esempi sono collegati su Github , quindi è possibile visualizzare e scaricare il codice sorgente come punti di partenza per la propria sperimentazione.

Cosa sono le forme CSS?

Il Specifiche per le forme CSS descrive le forme geometriche per noi in CSS. Nel livello 1 della specifica, ora a Candidate Recommendation Status, le forme possono essere applicate solo agli elementi floated. Un esempio è il modo più semplice per iniziare.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

Nell'esempio sopra aggiungiamo questa classe a un'immagine. Abbiamo spostato l'immagine a sinistra, dandole una larghezza, un'altezza e un margine, quindi utilizzare la proprietà shape-outside per curvare il testo attorno al cerchio.

Vedere il esempio

Prima di andare oltre, usando Chrome head over to http://betravis.github.io/shape-tools/ e trascina il bookmarklet Mostra forme sulla barra dei Preferiti.

Se poi vai alla mia pagina di esempio e fai clic sul bookmarklet, puoi vedere come viene disegnata la forma del cerchio:

Forme di base

La proprietà shape-outside utilizzata nel nostro semplice esempio può assumere vari valori. Le prime possibilità sono indicate come "forme base" nelle specifiche. Queste forme base sono funzioni:

inserto ()
cerchio()
ellisse()
poligono()

inserto ()

La funzione inset () è per la definizione di forme su elementi rettangolari, che float fa per noi e nella maggior parte dei casi è adeguata. Ci possono essere momenti in cui il controllo aggiuntivo è utile.

La funzione inset () può essere passata a quattro argomenti di posizione che vengono spostati verso l'interno dai bordi dell'elemento, più un raggio di bordo per la forma rettangolare, preceduto dalla parola chiave 'round'.

riquadro (in alto a destra in basso a sinistra intorno al raggio-raggio);

per esempio:

inset(10px 20px 10px 20px round 50%);

Gli argomenti per l'inset seguono la stessa stenografia del margine, quindi se vuoi un riquadro di 20 pixel attorno all'elemento puoi usare:

inset(10px round 50%);

Nel mio esempio ho usato un'immagine che ha molto spazio bianco al di sotto di essa. Se faccio semplicemente galleggiare l'immagine, ho un grande spazio sotto. Usando il valore di inserto posso inserire il fondo della forma, permettendo al testo di scorrere più vicino ad esso.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

Guarda l'esempio e utilizzare il bookmarklet Mostra forme per vedere la forma.

cerchio()

Abbiamo incontrato la forma di base del cerchio all'inizio di questo articolo. Il valore della forma di cerchio () è completamente descritto nelle specifiche come:

circle(r at cx cy);

Il valore r è il raggio del cerchio, il 50% è la metà della larghezza dell'elemento. Gli altri due valori sono le coordinate x e y per il centro del cerchio, questo essenzialmente consente di spingere il cerchio intorno.

Nel mio esempio ho usato:

circle(50%);

Potrei anche averlo descritto come:

circle(50% at 50% 50%);

Nella mia pagina di esempio su Github Ho un'icona, ha uno sfondo trasparente e per rendere più chiari gli esempi ho dato all'immagine un colore di sfondo grigio, una spaziatura, un bordo e un margine:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

È impostato per spostarsi a sinistra e, se non applichiamo alcuna forma a questa immagine, appare come nella schermata qui sotto.

Posso creare una forma di cerchio semplice:

.circle { shape-outside: circle(50%); }

Se uso il valore del cerchio di shape-inside e questa volta cambia le coordinate. Il cerchio è spinto verso l'alto e verso sinistra.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

Puoi utilizzare valori assoluti o relativi per le coordinate o le parole chiave come per posizionare le immagini di sfondo.

A questo punto vale la pena dare un'occhiata al concetto di scatole di riferimento. Ci sono quattro possibili caselle di riferimento che possiamo usare:

contenuti-box
padding-box
border-box
margin-box

La casella di riferimento predefinita per il cerchio è la margine.

shape-outside: circle(50%) margin-box;

È lo stesso della scrittura:

shape-outside: circle(50%);

Come ci si aspetterebbe margin-box è vincolato dal margine dell'elemento, border-box dal bordo, padding-box dal padding e content-box sarà vincolato dal contenuto reale.

Leggere Questo articolo per una spiegazione completa di come funzionano le scatole di riferimento nel contesto delle forme CSS.

Se diamo un'occhiata alla mia pagina di esempio usando il bookmarklet Mostra forme, puoi vedere chiaramente come funziona.

L'ultima cosa che ti mostrerò con il cerchio è come tagliare il contenuto per seguire la forma che hai creato. Come ho aggiunto il riempimento e i bordi visibili al mio elemento, il nostro testo sembra sovrapporsi. Possiamo effettivamente ritagliare il contenuto della forma usando la proprietà clip-path dalla specifica CSS Masking Level 1. Attualmente richiede il prefisso (vedi [Posso usare] [7]).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

Come puoi vedere nello screenshot qui sopra, il nostro elemento è ora ritagliato per seguire la curva. Funziona molto bene per le immagini, permettendoti di ritagliarle in modo che il testo sembri scorrere lungo le curve.

ellisse()

Molte forme possono essere curvate usando il valore dell'ellisse, anche se ovviamente non sono un'ellisse.

L'uso dell'ellisse è molto simile all'utilizzo del cerchio, tranne che al posto di un valore per il raggio, è necessario specificare separatamente il raggio xey.

shape-outside(rx ry at cx cy);

I valori del raggio possono essere unità assolute o relative e anche parole chiave lato più vicino e lato più lontano . Queste parole chiave sono valide anche per l'uso come raggio di un cerchio, sebbene siano meno utili nella pratica.

Il mio esempio senza forma applicata è semplicemente flottato.

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

Posso usare le parole chiave del raggio:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

Che crea un cerchio su questo elemento in quanto le dimensioni effettive dell'immagine sono quadrate.

Per forzare un'ellisse io uso unità di lunghezza assoluta.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

Per spostare l'ellisse sopra cambio le coordinate:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

poligono()

Se hai bisogno di un controllo davvero preciso quando disegni la tua forma, il valore del poligono ti sarà d'aiuto. Puoi specificare tutte le coordinate necessarie per la tua forma, con un minimo di tre.

Ogni coppia di coordinate è separata da una virgola.

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

Utilizzando il bookmarklet Mostra forme è possibile vedere la forma.

Forme da un'immagine

Un altro modo per creare una forma è dare un'immagine come valore per la forma esterna. Quell'immagine deve avere un canale alfa. (Puoi trovare ulteriori informazioni su come salvare le tue immagini se usi Photoshop su Blog della piattaforma Web Adobe .)

Puoi usare un'immagine già sulla tua pagina o passare un'immagine da un'altra parte.

Nota: l'immagine che usi deve essere compatibile con CORS. La prima volta che ho giocato con questo non riuscivo a capire perché la mia forma non funzionava quando ho provato localmente. Scopri di più qui .

La mia pagina di esempio contiene tre diversi usi di questa tecnica. Nel primo esempio ho un'immagine sulla mia pagina e anche quella immagine viene passata come URL da cui creare la forma.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

La soglia immagine-forma definisce la soglia di opacità che dovremmo usare, da 0 che è completamente trasparente a 1 che è completamente opaco.

Come puoi vedere il nostro testo arriva proprio contro l'immagine.

Nel secondo esempio, utilizzo un'icona diversa e imposta anche la proprietà shape-margin . Questo crea un margine curvo attorno al percorso dell'elemento.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

Non devi creare una forma basata su qualcosa sulla pagina. In questo ultimo esempio ho creato un'immagine in Photoshop, che sembra proprio questa.

Lo userò e creerò una forma su alcuni contenuti generati per modellare il mio testo lungo una linea diagonale.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Ciò significa che puoi creare un'immagine di mascheramento e usarla indipendentemente da ciò che è nella tua pagina.

Forme dalla casella di riferimento

Puoi anche dare un valore alla proprietà shape-outside che è la casella di riferimento che abbiamo discusso in precedenza quando osserviamo il valore circle ().

Per esempio:

.circle-margin-box { shape-outside: margin-box; }

Questo è utile quando hai usato il raggio del bordo per aggiungere un bordo arrotondato a un elemento e vuoi semplicemente che il contenuto si curvi attorno a quel bordo. Come in questo esempio.

Supporto per il browser

Una delle cose belle di CSS Shapes è che, dato che devono essere applicate a un float, possono essere facilmente utilizzate come un miglioramento progressivo per il tuo sito.

I browser che non supportano le forme visualizzeranno il float come ci si aspetterebbe, con una casella quadrata attorno all'elemento. I browser che supportano le forme avranno la forma che hai specificato. Potete vedere un grande esempio di questo sul nuovo sito per Il Web Avanti podcast. Nelle pagine podcast le forme CSS vengono utilizzate per curvare il testo attorno a un'immagine circolare dell'ospite.

Puoi vedere come appare in Chrome a sinistra. Firefox (sulla destra) non supporta ancora le forme e quindi otteniamo la casella quadrata attorno all'immagine.

Un utente di Firefox non saprebbe che si sarebbero persi quel piccolo tocco, e non danneggerebbe l'esperienza del sito di non averlo - è semplicemente molto più bello nel supportare i browser.

È possibile visualizzare le informazioni complete e aggiornate sul supporto del browser su Posso usare sito web. Al momento di scrivere Safari richiede un prefisso -webkit nelle proprietà CSS Shapes. I miei esempi usano Lea Verou Prefix gratuito script.

Con Shapes Level 1 allo status di Candidate Recommendation, speriamo di vederlo presto in tutti i browser moderni. Non c'è motivo per non iniziare a usarlo per aggiungere rifiniture ai tuoi progetti. Assicurati di eseguire il test in un browser senza supporto, soprattutto se stai sovrapponendo testo su immagini in cui la mancanza di supporto potrebbe rendere difficile la lettura del contenuto.

Se si desidera provare le forme di polyfill nei browser non di supporto, il team di Adobe Web Platform ha creato un polyfill disponibile su Github .

Risorse e ulteriore lettura

In questo articolo ho dettagliato le principali cose che potrebbe essere necessario sapere per iniziare a utilizzare le forme CSS nei tuoi siti oggi. Per ulteriori informazioni, comprese le informazioni su ciò che sta arrivando nelle specifiche del Livello 2, dai un'occhiata alle seguenti risorse.

Icone da Il progetto Noun . Icona di Fox è di Laura Olivares, Icona del divano dal signor Pixel.

css avanzato forme di css