Texturizzazione di un font con css

Nuove Tecniche Con le nuove specifiche css i font hanno acquisito un bel pò di valore all’interno dei nostri progetti. […]
Texturizzazione di un font con css

Nuove Tecniche

Con le nuove specifiche css i font hanno acquisito un bel pò di valore all’interno dei nostri progetti. Possiamo dotarli di ombre, sfumature, possiamo rotarli, metterli in prospettiva e quant’altro. Purtroppo non è consentita una totale compatibilità in tutti i browser, ed il supporto di suffissi come moz, ms, o e webkit non sempre funziona.

Scarsa compatibilità

In questo articolo vediamo come texturizzare un testo attraverso due metodi, il primo sicuramente più agevole perchè si avvale di una semplice proprietà css ma compatibile solo per browser webkit, nel secondo metodo utilizziamo il linguaggio vettoriale SVG, non proprio recente ma sicuramente più crossbrowser.

Texturizzazione mask-image

Mask-image è una proprietà css3 che serve a mascherare un elemento. Per godere a pieno dell’effetto conviene utilizzarlo su titoli o intestazioni di pagina, che in genere hanno dimensioni più grandi rispetto all’intero testo.

Preparazione Texture

La texture che ti occorre deve essere in formato png trasparente. Per crearla puoi servirti dei pennelli di photoshop oppure utilizzare una selezione ad intervallo colori su una texture scaricata da internet, sicuramente quest’ultima risulta più abbordabile 🙂 Assicurati quindi di avere una texture dove la trama che ti interessa sia trasparente, come questa:

Trasparenza texture

Codice html e css

Il tag html in esempio è l’h1, l’ho reso abbastanza grande da poter notare l’effetto 😉

h1{
  border: 0.12em solid;
  font-size: 6em;
  padding:1em;
  text-transform: uppercase;
  mask-image: url(texture.png);
  -webkit-mask-image: url(texture.png);
  -o-mask-image: url(texture.png);
  -moz-mask-image: url(texture.png);
  -ms-mask-image: url(texture.png);	
}

E’ sicuramente conveniente impostare la proprietà mask-image con tutti i suffissi nel caso in futuro (spero non lontano) ci fosse un supporto da parte degli altri browser.

Fonte: Texturise web type with css

Texturizzazione SVG

Lea Verou, una sviluppatrice greca, suggerisce un’alternativa cross-browser per questo tipo di effetto attraverso la tecnologia SVG. La sintassi può risultare un pò architettosa per un semplice titolo di pagina, ma a quanto pare è l’unica alternativa funzionante su un’ampia gamma di browser come Firefox, Ie9, Chrome, Safari ed Opera.

Codice html

<svg>
  <defs>
    <pattern id="wood" patternUnits="userSpaceOnUse" width="400" height="400" >
      <image xlink:href="http://subtlepatterns.com/patterns/purty_wood.png" width="400" height="400" />
	</pattern>
  </defs>
  <text y="1.2em">Laboratorio CSS</text>
</svg>

Codice css

svg {
  width:100%;
  font: 900 500%/1.2 'Arial Black', sans-serif;
}

text {
  fill: url(#wood); 
}

Con il tag image dell’svg carichiamo da una fonte esterna un’immagine con dimensione 400×400, che andrà a “coprire” il tag text attraverso la proprietà fill del css.

Per browser inferiori a ie9, il tag image dell’svg viene letto come una normale immagine, quindi come un tag img, e occuperà spazio come tale. Meglio nasconderla in modo condizionale per questo tipo di browser.

Fonte: Text masking – the standard way

Quale useresti?

Ora mi chiedo, se tu dovessi utilizzare uno di questi due metodi, quale prenderesti in considerazione? scrivilo pure nei commenti o sulla nostra fanpage 😉

Provalo subito

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