WebKit introduce le maschere CSS

àˆ ormai chiaro il fatto che le nuove caratteristiche dei CSS permetterranno di accedere a mondi non ancora esplorati, di rendere possibile cià che è attualmente impossibile e creare pagine ancora più complete ed accattivanti.

Dopo l'introduzione dei gradienti, WebKit fa un ulteriore passo in avanti: è ora delle mashere CSS. Come spiegato nell'articolo CSS Masks su Surfin'Safari scritto da Dave Hyatt, le maschere permettono di "rivestire" il contenuto di un elemento utilizzando pattern basati cui canali alpha.

A metà  articolo trovate diversi esempi che mostrano le CSS Mask in azione (le immagini raffiguranti una bambina). Il primo esempio utilizza come sorgente della maschera l'immagine "mask.png" all'interno della regola webkit-mask-box-image contenuta nell'attributo style dell'immagine principale. con altri parametri specifici che permettono di personalizzare l'effetto:

style=”-webkit-mask-box-image: url(mask.png) 75 stretch;”

Nel secondo esempio viene usata una maschera in combinazione con un effetto gradiente:

style=”-webkit-mask-image:
-webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1),
to(rgba(0,0,0,0))”

Nel terzo al gradiente si aggiunge l'ottimo effetto border-radius:

style=”-webkit-border-radius: 10px;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1),
 to(rgba(0,0,0,0))”

Mentre nell'ultimo esempio, viene usata un'immagine SVG come maschera per creare un "effetto circolare".

Come ricorda Hyatt inoltre, abbiamo sempre a disposizione tutta la potenza dei background multipli e delle regole border-image. Con questi strumenti a disposizione, creazioni di potenza e flessibilità  inimmaginabile diventano possibili!

Infine, ricordo che è possibile visualizzare e riportare i bug all'indirizzo http://bugs.webkit.org/