Esempi creativi di texture con i CSS

Una proprietà abbastanza recente dei CSS e, purtroppo, ancora non pienamente supportata, permette di bypassare l'uso di Photoshop e affini per creare interessanti texture su testo ed immagini. La proprietà in questione è la mask-image e consente di applicare delle immagini a parziale o totale copertura di testi o altre foto, ricreando l'effetto maschera tipico degli editor grafici.

Ecco alcuni esempi, da quelli più semplici ad alcuni più creativi e articolati. La proprietà in sè è abbastanza semplice da comprendere, come spesso accade sarà più importante lavorare di fantasia e buon gusto.

1. Esempio CSS Mask 1: un piacevole effetto catalogo 3D con rotazione ed ombreggiatura.
2. Esempio CSS Mask 2: effetto timbro "approved style" con grana.
3. Esempio CSS Mask 3: effetto simile al precedente.
4. Esempio CSS Mask 4: mini tutorial su come usare una texture.
5. Esempio CSS Mask 5: 3 piccoli trucchi per effetti di impatto, compreso uno sfondo in movimento.
6. Esempio CSS Mask 6: anche se in lingua incomprensibile...un curioso effetto di ritaglio ed un altro piacevole effetto pennellato su foto.

C'è da considerare che il supporto di IE è totalmente inesistente, mentre Firefox permette solo il mascheramento tramite elementi SVG (ed alcuni di questi esempi non funzioneranno). L'uso del prefisso -webkit- è indispensabile per tutti gli altri browser.

Un peccato che ancora esista questa scarsa compatibilità, nulla vieta però di utilizzare questa tecnica visto che degrada senza problemi verso un comportamento standard. Il risparmio su manutenzione e peso rispetto ad una soluzione classica è certo.