CSS3 extreme #00: CSS Shapes

Prima dell’avvento di queste property in css era praticamente impossibile definire un layout stile magazine per un sito web.

Le CSS Shapes permettono di definire delle forme geometriche il cui testo può scivolare intorno: queste forme possono essere formati da cerchi, ellissi, poligoni semplici o complessi.

La corretta implementazione delle Shapes CSS è dettato dalle CSS Shapes Module Level 1, che si risolve tutto intorno alla property shape-outside, proprio quella che definisce la forma su cui il testo scola attorno. Questa volta vediamo come usare il dato <basic-shape> e settare gli adeguati valori.
Questi sono i possibili valori: circle(), ellipse(), inset(), polygon().

Per applicare questi valori a questo elemento deve essere applicato il float().

Il value circle()

mettiamo un <div> vuoto con dentro la classe cerchio, mettendo in sequenza dei paragrafi: innestiamo un float:left, settiamo height e width e applichiamo questo value nel nostro shape-outside.

Riempiamo il cerchio con un background background: linear-gradient(to top right, #FDB171, #FD987D);

ma vediamo che con questa viene fuori un quadrato, e non un cerchio come stiamo programmando. Per questo dovremmo utilizzare la property clip-path, applicando lo stesso value del circle()

La function circle() prende al suo interno solo un parametro, il radius: di default vi è impostato il 50% o 100px: usando quindi il circle(50%) o circle(100px) otteniamo lo stesso risultato.

Inoltre, applicando la property shape-margin possiamo eliminare il problema del testo troppo vicino alla nostra forma geometrica: con questa utilizziamo le stesse metriche standard (px, em e rem).

In aggiunta al radius, una shape function può utilizzare una position usando la keyword “at”. La position di default è l’esatto centro del cerchio, quindi per esteso si scriverebbe una formula del tipo (50% at 50% 50%).

Per fare un perfetto semi-cerchio scriviamo (50% at 0 50%), sempre in coppia con il suo clip-path()

See the Pen oJqxpN (@labnova) on CodePen.


We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.