Come usare le forme CSS nel tuo web design

I principi di layout - colonne e righe, angoli e linee - che usiamo per costruire siti Web oggi sono in gran parte influenzati dal loro patrimonio di stampa. E anche se l'implementazione della rete sul web sta migliorando e migliorando, il layout Web in generale è ancora scomodo rispetto ai supporti di stampa, specialmente quando si tratta di flusso di contenuti. 

Riviste e giornali hanno sempre goduto di modi eleganti per organizzare il layout dei contenuti, come ad esempio il wrapping del testo o all'interno di forme non rettangolari.

Rivista multiuso di GreenSocks

Esploriamo come il CSS Shapes Module ci permetterà questa stessa libertà sul web.

Introduzione rapida alle forme CSS

Le forme CSS consentono ai web designer di creare più layout geometrici astratti, oltre a semplici rettangoli e quadrati. Le specifiche ci forniscono nuove proprietà CSS che includono forma-fuori e Forma margine. Il supporto del browser è ragionevole, sebbene al momento queste proprietà siano disponibili solo in Chrome, Opera e Safari, con -webkit- prefisso, quindi -webkit-forma-fuori. 

Il forma-fuori la proprietà farà sì che il contenuto in linea si sposti (all'esterno) seguendo la curva dell'elemento, piuttosto che il modello della scatola. Inizialmente c'era anche forma-inside per avvolgere il contenuto all'interno di un elemento; il testo all'interno di un elemento circolare verrebbe anch'esso modellato in una forma circolare. Tuttavia, l'implementazione è stata posticipata per CSS Shapes Level 2.

Dall'alto verso il basso: forma fuori e forma dentro in azione.

Il Forma margine proprietà imposta il margine attorno a qualsiasi forma utilizzi il forma-fuori. 

Diamo un'occhiata ad alcuni esempi.

Creare una forma

Il modo più semplice per scoprire come funziona CSS Shapes è probabilmente attraverso la creazione di una cerchia. Quindi, ecco a div (il nostro cerchio), con diversi paragrafi a fianco.

 
Lorem ipsum ... 
 
Lorem ipsum ... 
 
Lorem ipsum ... 

Ecco alcuni stili di base, tra cui la larghezza e l'altezza del nostro cerchio, il border-radius per modellare l'elemento e un float in modo che il paragrafo avvolga l'elemento.

.circle width: 250px; altezza: 250 px; background-color: # 40a977; raggio-limite: 50%; fluttuare: a sinistra; 

Come vorremmo eccetto, i paragrafi sono ora avvolti attorno all'elemento. Tuttavia, poiché la proprietà border-radius non definisce la forma dell'elemento attuale, il paragrafo wrap non forma la curva del cerchio.

Se ispezioniamo l'elemento tramite il nostro browser DevTools, troveremo che l'elemento è, in effetti, ancora una scatola. Quindi, anche se il nostro div ha l'aspetto di un cerchio, il border-radius non ha fatto nulla al effettivo forma dell'elemento.

Notare l'evidenziazione rettangolare attorno all'elemento.

Affinché il nostro paragrafo aderisca alla forma circolare, abbiamo bisogno di cambiare il effettivo forma dell'elemento attraverso il forma-fuori proprietà; in questo caso, ne aggiungeremo uno con il cerchio() funzione passata come valore.

.circle width: 250px; altezza: 250 px; background-color: # 40a977; raggio-limite: 50%; fluttuare: a sinistra; -webkit-shape-outside: circle (); forma fuori: cerchio (); 

I nostri paragrafi ora si avvolgono ordinatamente intorno alla circonferenza del cerchio.

Inoltre, se ora ispezioniamo l'elemento tramite DevTools, vedremo che l'elemento è correttamente reso in un cerchio.

Notare l'evidenziazione più scura.

Con alcuni margini, guarda come potrebbe migliorare un layout semplice:

Personalizzazione del cerchio

Il cerchio() la funzione richiede un paio di valori per definire il raggio e il centro coordinato rispettivamente: cerchio (r a x y). Per impostazione predefinita, il valore del raggio deriva dalla dimensione dell'elemento; se l'elemento è 300px largo, ad esempio, il raggio sarà 150px (il raggio è metà del diametro del cerchio). 

Allo stesso modo, il X e y le coordinate sono misurate in relazione alla dimensione dell'elemento e sono predefinite su 50% 50%; proprio al centro dell'elemento.

Il cerchio è posizionato al centro dell'elemento. 

Questi due valori saranno utili quando si desidera ridimensionare la forma, mantenendo le dimensioni effettive degli elementi o spostando la forma mantenendo la posizione dell'elemento. Nell'esempio seguente, ridurremo il raggio del cerchio a 60px e impostare la coordinata centrale su 30% 70%, che dovrebbe spostare il cerchio in basso a sinistra del riquadro degli elementi.

I paragrafi ora passano attraverso la scatola degli elementi che segue la dimensione del cerchio. Guarda la demo.

Vale la pena notare che quando si modifica il cerchio, sia la coordinata centrale che il raggio devono essere definiti in modo esplicito; aggiungendo solo uno di essi non è valido.

cerchio (60 px al 30% 70%) // corretto. circle (60px) // invalid. cerchio (al 30% 70%) // non valido.

Modello di scatola di forme

Le forme CSS ereditano lo stesso modello di scatola principio come elemento, ma applicato al di fuori dell'ambito dell'elemento stesso. Questo ci consente di impostare separatamente l'elemento, ad esempio border-box mentre si imposta la forma su padding-box. Per cambiare forma modello di scatola, aggiungi uno dei modello di scatola parole chiave, contenuti-box, margin-box, border-box, o padding-box dopo la funzione.

.circle width: 250px; altezza: 250 px; background-color: # 40a977; raggio-limite: 50%; fluttuare: a sinistra; imbottitura: 10px; border: 20px solid #ccc; margine: 30 px; -webkit-shape-outside: circle () padding-box; forma-esterno: cerchio () padding-box; 

Il modello di casella predefinito della forma è impostato su margin-box. E nel seguente esempio, l'abbiamo modificato padding-box per dire al browser di escludere il margine dell'elemento quando si determinano le dimensioni della forma o l'estensione. Ora dovremmo trovare il paragrafo passare attraverso il bordo e toccare immediatamente il padding dell'elemento.

Il quadrato arancione è il margine, il quadrato giallo è il bordo e il quadrato verde è il riempimento,

Consiglio vivamente di dare un'occhiata al nostro corso gratuito sugli elementi di base del CSS Box Model per ulteriori informazioni su come funziona il box model in dettaglio.

Creare più forme

Le specifiche CSS Shapes hanno alcune altre funzioni di forma:

• ellisse(): Come suggerisce il nome, questa funzione creerà una forma di ellisse. Possiamo configurare il raggio dell'ellisse e spostare anche le coordinate del centro di forma. Ma a differenza del cerchio() funzione, il ellisse() la funzione applica due misure di raggio, orizzontale e verticale, quindi ellisse (100px 180px al 10% 20%).
• poligono(): Questa funzione ci consente di creare forme più complesse come triangoli, esagoni e forme non geometriche. L'utilizzo del poligono non è facile come creare una cerchia, ma lo strumento Convertitore percorso a poligono lo rende un po 'più intuitivo.

Avvolgendo

In questo tutorial, abbiamo esaminato l'applicazione di base delle forme CSS; abbiamo creato una forma, personalizzato la dimensione, la posizione e il modello di scatola. Al momento della scrittura, diversi aspetti delle forme CSS sono ancora molto approssimativi, il che probabilmente è il motivo per cui non lo vediamo ampiamente utilizzato ancora.

• Come accennato in precedenza in questo tutorial, le forme CSS forma-inside la proprietà, che ci consente di avvolgere e modellare il contenuto all'interno di un elemento, è stata messa in ghiaccio.
• La specifica CSS Shapes fornisce una proprietà separata denominata Forma-box per definire il modello box forma, anche se al momento sembra inapplicabile a qualsiasi browser.
• Safari richiede il -webkit- prefisso, evidenziando che questa funzione è sperimentale.

Tuttavia, nonostante i lenti progressi e la disparità tra i vari browser al momento, non vedo l'ora di utilizzare CSS Shapes! Una volta che i principali browser lo raccolgono, non vedo l'ora di vedere alcuni layout davvero creativi sul web!