Questa pagina è stata tradotta dall'API Cloud Translation.

Introduzione alle forme CSS

Inserire contenuti in percorsi personalizzati

Razvan Caliman

Per molto tempo, i web designer sono stati costretti a creare contenuti rispettando i vincoli del rettangolo. La maggior parte dei contenuti sul web è ancora intrappolata in semplici caselle perché la maggior parte delle iniziative creative con layout non rettangolari finisce in frustrazione. Questo sta per cambiare con l'introduzione delle forme CSS, disponibili a partire da Chrome 37. Le forme CSS consentono ai web designer di avvolgere i contenuti attorno a percorsi personalizzati, come cerchi, ellissi e poligoni, liberandosi così dai vincoli del rettangolo.

Le forme possono essere definite manualmente o dedotte dalle immagini.

Vediamo un esempio molto semplice.

Forse sei stato ingenuo come me la prima volta che hai inserito un'immagine con parti trasparenti aspettandoti che i contenuti si a capo e riempissero gli spazi vuoti, per poi rimanere deluso dalla forma rettangolare del testo a capo che persiste intorno all'elemento. Per risolvere questo problema puoi utilizzare le forme CSS.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

La dichiarazione CSS shape-outside: url(image.png) indica al browser di estrarre una forma dall'immagine.

La proprietà shape-image-threshold definisce il livello di opacità minimo dei pixel che verranno utilizzati per creare la forma. Il valore deve essere compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco). Pertanto, shape-image-threshold: 0.5 indica che per creare la forma verranno utilizzati solo i pixel con opacità pari o superiore al 50%.

La proprietà float è fondamentale in questo caso. Sebbene la proprietà shape-outside definisca la forma dell'area intorno alla quale i contenuti verranno a capo, senza il parametro float non vedrai gli effetti della forma.

Gli elementi hanno un'area di galleggiamento sul lato opposto del loro valore float. Ad esempio, se un elemento con l'immagine di una tazza di caffè viene visualizzato a sinistra, l'area di galleggiamento verrà creata a destra della tazza. Anche se puoi creare un'immagine con spazi su entrambi i lati, i contenuti verranno a capo solo sul lato opposto indicato dalla proprietà float, a sinistra o a destra, mai su entrambi.

In futuro, sarà possibile utilizzare shape-outside per gli elementi non in primo piano con l'introduzione delle esclusioni CSS.

Creare forme manualmente

Oltre a estrarre le forme dalle immagini, puoi anche codificarle manualmente. Puoi scegliere tra alcuni valori funzionali per creare forme: circle(), ellipse(), inset() e polygon(). Ogni funzione di forma accetta un insieme di coordinate ed è accoppiata a una casella di riferimento che stabilisce il sistema di coordinate. A breve parleremo di più delle caselle di riferimento.

La funzione circle()

Illustrazione del valore della forma circle()

La notazione completa per un valore della forma del cerchio è circle(r at cx cy), dove r è il raggio del cerchio, mentre cx e cy sono le coordinate del centro del cerchio sull'asse X e sull'asse Y. Le coordinate del centro del cerchio sono facoltative. Se li ometti, verrà utilizzato per impostazione predefinita il centro dell'elemento (l'intersezione delle sue diagonali).

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

Nell'esempio precedente, i contenuti vengono visualizzati lungo il perimetro di un percorso circolare. Il singolo argomento 50% specifica il raggio del cerchio, che in questo caso specifico corrisponde alla metà della larghezza o dell'altezza dell'elemento. La modifica delle dimensioni dell'elemento influisce sul raggio della forma circolare. Questo è un esempio di base di come le forme CSS possono essere responsive.

Prima di procedere, una breve digressione: è importante ricordare che le forme CSS influiscono solo sulla forma dell'area di galleggiamento attorno a un elemento. Se l'elemento ha uno sfondo, questo non verrà ritagliato dalla forma. Per ottenere questo effetto, devi utilizzare le proprietà di mascheramento CSS: clip-path o mask-image. La proprietà clip-path è molto utile perché segue la stessa notazione delle forme CSS, quindi puoi riutilizzare i valori.

Illustrazione della forma "circle()` + clip-path

Le illustrazioni in questo documento utilizzano il ritaglio per evidenziare la forma e aiutarti a comprendere gli effetti.

Torna alla forma del cerchio.

Quando si utilizzano le percentuali per il raggio del cerchio, il valore viene effettivamente calcolato con una formula leggermente più complessa: radice quadrata di (larghezza^2 + altezza^2) / radice quadrata di 2. È utile comprenderlo perché ti aiuterà a immaginare la forma del cerchio risultante se le dimensioni dell'elemento non sono uguali.

Tutti i tipi di unità CSS possono essere utilizzati nelle coordinate della funzione di forma: px, em, rem, vw, vh e così via. Puoi scegliere quello più flessibile o rigido per le tue esigenze.

Puoi modificare la posizione del cerchio impostando valori espliciti per le coordinate del centro.

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

In questo modo il centro del cerchio si trova all'origine del sistema di coordinate. Che cos'è il sistema di coordinate? È qui che vengono introdotte le caselle di riferimento.

Caselle di riferimento per le forme CSS

La casella di riferimento è una casella virtuale attorno all'elemento che stabilisce il sistema di coordinate utilizzato per disegnare e posizionare la forma. L'origine del sistema di coordinate si trova nell'angolo in alto a sinistra, con l'asse X rivolto verso destra e l'asse Y verso il basso.

Ricorda che shape-outside modifica la forma dell'area fluttuante attorno alla quale verranno a capo i contenuti. L'area di galleggiamento si estende ai bordi esterni del riquadro definito dalla proprietà margin. Si tratta del margin-box ed è la casella di riferimento predefinita per una forma se non ne viene menzionata una esplicitamente.

Le due dichiarazioni CSS seguenti hanno risultati identici:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Non abbiamo ancora impostato un margine per l'elemento. A questo punto è possibile presumere che l'origine del sistema di coordinate e il centro del cerchio si trovino nell'angolo in alto a sinistra dell'area dei contenuti dell'elemento. Questo cambia quando imposti un margine:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

L'origine del sistema di coordinate ora si trova all'esterno dell'area dei contenuti dell'elemento (100 pixel verso l'alto e 100 pixel a sinistra), così come il centro del cerchio. Anche il valore calcolato del raggio del cerchio aumenta per tenere conto dell'aumento della superficie del sistema di coordinate stabilito dalla casella di riferimento margin-box.