Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Introduzione alle forme CSS

Disposizione del testo attorno a percorsi personalizzati

Razvan Caliman

Per molto tempo, i web designer sono stati costretti a creare entro i vincoli del rettangolo. La maggior parte dei contenuti sul web è ancora intrappolata in semplici riquadri perché la maggior parte delle iniziative creative con layout non rettangolari finisce per essere frustrante. La situazione sta per cambiare con l'introduzione delle forme CSS, disponibili a partire da Chrome 37. Le forme CSS consentono ai web designer di inserire 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 hai avuto la mia stessa ingenuità quando hai provato per la prima volta a posizionare un'immagine con parti trasparenti, aspettandoti che i contenuti si adattassero e riempissero gli spazi vuoti, per poi rimanere deluso dalla forma rettangolare del testo che persisteva attorno all'elemento. Le forme CSS possono essere utilizzate per risolvere questo problema.

<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 minimo di opacità dei pixel che verranno utilizzati per creare la forma. Il suo valore deve essere compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco). Pertanto, shape-image-threshold: 0.5 significa 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 attorno alla quale verrà disposto il contenuto, senza il float non vedrai gli effetti della forma.

Gli elementi hanno un'area mobile sul lato opposto del valore float. Ad esempio, se un elemento con l'immagine di una tazza di caffè viene spostato a sinistra, l'area di spostamento verrà creata a destra della tazza. Anche se puoi progettare un'immagine con spazi vuoti su entrambi i lati, i contenuti verranno disposti intorno alla forma solo sul lato opposto designato dalla proprietà float, a sinistra o a destra, mai su entrambi.

In futuro, sarà possibile utilizzare shape-outside su elementi che non sono mobili con l'introduzione delle esclusioni CSS.

Creazione manuale delle forme

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 è associata a una casella di riferimento che stabilisce il sistema di coordinate. A breve parleremo più nel dettaglio delle caselle di riferimento.

La funzione circle()

Illustrazione del valore della forma circle()

La notazione completa per un valore di forma circolare è 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 verranno disposti intorno all'esterno di un percorso circolare. L'argomento singolo 50% specifica il raggio del cerchio, che in questo caso specifico equivale alla metà della larghezza o dell'altezza dell'elemento. La modifica delle dimensioni dell'elemento influirà sul raggio della forma circolare. Questo è un esempio di base di come le forme CSS possono essere adattabili.

Prima di andare oltre, una breve parentesi: è importante ricordare che le forme CSS influenzano solo la forma dell'area mobile 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 CSS Masking, ovvero 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 di questo documento utilizzano il ritaglio per evidenziare la forma e aiutarti a comprendere gli effetti.

Torniamo alla forma del cerchio.

Quando utilizzi le percentuali per il raggio del cerchio, il valore viene effettivamente calcolato con una formula leggermente più complessa: sqrt(width^2 + height^2) / sqrt(2). È utile comprenderlo perché ti aiuterà a immaginare quale sarà 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 shape: px, em, rem, vw, vh e così via. Puoi scegliere quello più flessibile o rigido in base alle tue esigenze.

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

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

In questo modo, il centro del cerchio viene posizionato nell'origine del sistema di coordinate. Qual è il sistema di coordinate? È qui che introduciamo i riquadri di riferimento.

Riquadri 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 rivolto verso il basso.

Ricorda che shape-outside altera la forma dell'area mobile attorno alla quale verrà disposto il contenuto. L'area mobile si estende ai bordi esterni della casella definita dalla proprietà margin. Questa è chiamata margin-box ed è la casella di riferimento predefinita per una forma se non ne viene menzionata esplicitamente una.

Le seguenti due dichiarazioni CSS 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 sull'elemento. A questo punto, è lecito 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 al di fuori dell'area dei contenuti dell'elemento (100 px in alto e 100 px a sinistra), così come il centro del cerchio. Anche il valore calcolato del raggio del cerchio aumenta per tenere conto della superficie aumentata del sistema di coordinate stabilito dalla casella di riferimento margin-box.