WebKit introduce le maschere CSS
Mercoledì 30 Aprile 2008 - 10:27
di Riccardo Degni
È 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/
Commenti
1
Tutti esempi molto interessanti ma se non sono supportati dagli altri browser, rimarranno solo demo… Speriamo bene in seguito.
2
Ma basta con sto webkit! I browser non supportano queste funzionalita’ e mai le supporteranno, skip skip skip.
3
Domanda: è standard?
CSS2 no di certo, forse CSS3 ma non mi pare.
Se non è standard, a cosa serve?
# - postato da Gianluca - 30 Aprile 2008 - 11:47
4
@Gianluca
No, non fanno parte degli standard. Ma come per i CSS gradient e gli altri, David Hyatt & co. manderanno una proposta al W3C per farli diventare tali (in CSS3 che non e’ ancora definito).
Fra l’altro molte delle cose introdotte ultimamente da webkit, degradano elegantemente se il browser non li supporta.
Infine se tutti i browser implementassero solo cose gia’ implementate dagil altri browser… beh, nessuno farebbe nulla. Qualcuno dovra’ pure cominciare, no?
# - postato da Diego Virasoro - 30 Aprile 2008 - 12:10
5
@Diego
degradano elegantemente se il browser non le supporta
Non è merito di webkit, sarebbe merito del designer e del browser.
Comunque personalmente tengo a freno l’entusiasmo:
diventasse anche uno standard sarebbe più difficile usarle che ignorarle.
Non tutti i browser sono standard-compliant (speciamente IE che tra l’altro è uno dei più diffusi) e non possiamo aspettarci che i produttori di software cambino atteggiamento da un giorno all’altro.Molto probabilmente verranno fuori ognuno con la propria implementazione della stessa cosa, finchè non rischieranno di perdere utenti, e solo allora inizieranno a correggere il tiro.
# - postato da Gianluca S. - 30 Aprile 2008 - 13:12
6
Piccola aggiunta:
alla serie di effetti grafici introdotti in webkit c’è anche l’effetto riflesso, e probabilmente verrà introdotto qualche altro effetto elementare.
Avanti così, non si rischia di togliere il lavoro a chi fa grafica? :P# - postato da Gianluca S. - 30 Aprile 2008 - 13:16
7
@Diego Virasoro
> come per i CSS gradient e gli altri […]
> manderanno una proposta al W3C per farli diventare taliPer come la vedo io, prima si fa la proposta e poi (quando la proposta fosse accettata) si implementa la funzionalità; altrimenti si continuerà in eterno a creare browser fuori standard e a forzare la mano a sviluppatori e W3C.
> Fra l’altro molte delle cose introdotte ultimamente da webkit,
> degradano elegantemente se il browser non li supporta.Ok, ma ciò non toglie il fatto che quelli di WebKit non stanno facendo altro che realizzare un nuovo orticello (inutile)
> Infine se tutti i browser implementassero solo cose gia’
> implementate dagil altri browser… beh, nessuno farebbe
> nulla. Qualcuno dovra’ pure cominciare, no?Vero, però si deve cominciare dal W3C, non concludere con esso, altrimenti l’istituzione stessa diventa del tutto inutile.
# - postato da Gianluca - 30 Aprile 2008 - 14:06
8
Quoto in toto Diego Virasoro e aggiungo qualche considerazione random.
Il mondo dei CSS è stagnante da tempo: ogni tanto ci vuole qualcuno che gli scuota un po’ via le ragnatele di dosso…
WebKit: dopo tutto, perchè no?
Se queste manipolazioni CSS fossero largamente supportate, immaginate quante immagini e quanta banda si risparmierebbero… Lo so che da qualche anno a questa parte con la banda larga questo non è più un problema sentito come una volta… Ma IMHO anche questo in un certo senso è sviluppo sostenibile.Sul fatto che quelli di Webkit siano codici prorietari, è vero, non sono standard. Ma anche se lo fossero, cosa cambierebbe? Non è che tutti i browser supportino gli standard esistenti a priori in quanto tali… Non è un problema di standard, ma di supporto browser.
E ad uno standardista convinto come me, anche dopo tanti anni, costa ammetterlo…I computer Apple stanno crescendo in numero, iPhone e iPod anche… E’ ovvio che quelli di WebKit spingano le loro soluzioni… e meno male che c’è qualcuno che pensa ancora ad inventare qualcosa di nuovo…
9
Quoto l’ultimo, per tutti.
Vero, però si deve cominciare dal W3C, non concludere con essoQualche post addietro ho letto che il W3C prenderebbe in considerazione solo richieste basate su realtà esistenti. Quindi appare logico prima implementare e poi proporre.
Questi effetti visivi sono, al momento, a totale appannaggio di webkit. Bene! Vorrà dire che chi usa browser basati su tale motore godrà degli effetti grafici, gli altri vedranno un’immagine “standard”. Penso sia il caso di abbandonare l’idea del web identico come una pagina stampata. Se no creiamo un bel PDF e non se ne parla più!
Pierluigi
# - postato da P&M - 30 Aprile 2008 - 15:35
10
Adoro gli sviluppi di tutto il web e cerco sempre di rispettare gli standard il più possibile ma qui siamo moooolto nel futuro. Queste cose quando diventeranno standard? Se lo diventeranno. Molti clienti non vedono ancora oltre le gif animate! E quando gli presento una slide che ritengo interessante si spaventano!… evvai con i siti in pdf ;-)
11
Non dimentichiamoci che adobe air si basa su webkit ;) al posto di usarle sul web si possono usare ste cose in applicazioni in AIR ;)
# - postato da Skyline - 07 Maggio 2008 - 11:19