Effetto filtro su testo con i CSS
Articolo scritto da Luca Ruggiero
L'attributo filter dei CSS permette di impostare effetti molto gradevoli sia sulle immagini che sul testo.
La sintassi è la seguente
filter: NomeFiltro()dove NomeFiltro() può assumere i diversi valori. I filtri applicabili al testo sono:
- Alpha imposta un effetto trasparenza al testo
- Blur imposta un effetto ombra sfumata al testo
- Flip capovolge il testo in orizzontale (FlipH) o verticale (FlipV)
- Glow imposta un bordo intorno al testo
- Shadow imposta un'ombra vicino al testo
- DropShadow imposta un'ombra distante dal testo
- Wave imposta un effetto onda al testo
Di seguito qualche esempio di codice:
<h1 style="width: 100%; color: #FF0000; filter: Alpha(Opacity=10)">Alpha</h1> <h1 style="width: 100%; filter: Blur()">Blur</h1> <h1 style="width: 100%; filter: Glow(Strength=2)">Glow</h1> <h1 style="width: 100%; filter: FlipV">Flip</h1> <h1 style="width: 100%; filter: Shadow(Strength=5)">Shadow</h1> <h1 style="width: 100%; filter: DropShadow()">Drop Shadow</h1> <h1 style="width: 100%; filter: Wave(Strength=2)">Wave</h1>Di seguito l'output dei vari esempi:
Alpha
Blur
Glow
Flip
Shadow
Drop Shadow
Wave
NOTA 1: per ottenere l'effetto è sempre necessario impostare il width dell'elemento di testo HTML utilizzato.NOTA 2: questi effetti funzionano solo con IE. L'unica proprietà dei Filter applicabile ai Browser Mozilla, Firefox e Netscape è Alpha(Opacity...)
