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.

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *