Realizzare forme con i contenuti testuali attraverso i css3

Grazie alla proprietà shape-inside vedremo come realizzare delle forme geometriche con i contenuti testuali di una pagina web.
Realizzare forme con i contenuti testuali attraverso i css3

Testo sagomato con jquery? non serve più

Tempo fa scrissi un post che trattava di un plugin jquery chiamato Bacon, questo permetteva di creare delle forme geometriche con i contenuti testuali di una pagina web. Tra non molto, per chi dovesse utilizzare questo tipo di impaginazioni, potrà affidarsi direttamente al css.

Come usare la proprietà shape inside

La proprietà shape-inside permette di sviluppare 3 tipologie di forme: poligono, cerchio ed ellisse. Attualmente però funziona solo la poligonale.
In questo esempio vedrete il codice per creare un triangolo (la demo e come sempre in fondo all’articolo).

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
p{
    font-size:15px;
    width:400px;
    height:400px;
    overflow:hidden;
    text-align:justify;
    -webkit-shape-inside:polygon(0px 0px, 0 400px, 400px 400px);
}

Creare forme poligonali

La cosa comincia ad essere complicata per la creazione di forme poligonali più complesse perchè non si conoscono effettivamente i valori di spostamento da associare alla proprietà shape-inside.

Ecco un trucco che può aiutarci

Per prima cosa disegniamo con un programma vettoriale (Illustrator) la forma poligonale che ci interessa. Successivamente salviamo il file in formato svg e lo apriamo con un programma di editor. Ecco come ci apparirà:

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<polygon fill="#50BECE" stroke="#000000" stroke-miterlimit="10" points="215.121,419.641 151.242,309 215.121,198.359 342.879,198.359 406.758,309 342.879,419.641" />
</svg>

I valori da utilizzare sono quelli nell’attributo points. Disponiamo ogni singolo valore come presente nel css che segue, assegnando a ciascuno un’unità di misura (px,%). Naturalmente non comparirà una forma esatta ma dovremmo in ogni caso ritoccare a mano qualche valore.

p{
    font-size:12px;
    width:300px;
    height:300px;
    text-align:justify;
    -webkit-shape-inside:polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
}

Il testo nell’esempio non ha nessuna forma?

La proprietà shape-inside attualmente funziona solo su browser WebKit, e molto probabilmente solo su Chrome. Inoltre se non riuscite a visualizzare l’esempio occorre attivare l’opzione “funzionalità sperimentali WebKit” che potete trovare incollando questo percorso chrome://flags/ nella barra degli indirizzi di Chrome.

Fonte:

Wrapping Content In Shapes With CSS3

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github