Il nuovi stili introdotti in CSS3 ha dato ai professionisti del web la possibilità di aggiungere effetti simili a Photoshop alle loro pagine. Un effetto visivo che puoi aggiungere usando CSS3 consiste nel rendere interattive le pagine Web creando aree sbiadite che vengono messe a fuoco quando un visitatore del sito fa qualcosa, come passare con il mouse su quell'elemento. Questo effetto utilizza una combinazione di opacità e transizione.
Cambia opacità al passaggio del mouse
Un elemento interattivo consiste nel modificare l'opacità di un'immagine quando un cliente passa il mouse su quell'elemento. Per questo esempio (l'HTML è mostrato sotto), usiamo un'immagine con l'attributo class of greydout.
Per renderlo grigio, aggiungi le seguenti regole di stile al tuo foglio di stile CSS:
.greydout {
-opacità del webkit: 0,25;
-moz-opacità: 0,25;
opacità: 0,25;
}
Queste impostazioni di opacità si traducono al 25%. Ciò significa che l'immagine verrà mostrata come 1/4 della sua normale trasparenza. Completamente opaco senza trasparenza sarebbe il 100 percento, mentre lo 0 percento sarebbe completamente trasparente.
Successivamente, per rendere l'immagine chiara (o più accuratamente, per diventare completamente opaca) quando il mouse passa sopra di essa, dovresti aggiungere quanto segue:
.greydout: hover {
-webkit-opacità: 1;
-moz-opacità: 1;
opacità: 1;
}
Ulteriori regolazioni dell'opacità
Noterai che, per questi esempi, utilizziamo le versioni della regola con il prefisso del fornitore per garantire la compatibilità con le versioni precedenti di quei browser. Anche se questa è una buona pratica, la regola dell'opacità è ben supportata dai browser, ed è sicuro eliminare quelle righe con il prefisso del fornitore.
Tuttavia, non c'è motivo per non includere questi prefissi se si desidera garantire il supporto per le versioni precedenti del browser. Assicurati solo di seguire la migliore pratica accettata di terminare la dichiarazione con la versione normale e senza prefisso dello stile.
Quando viene distribuito su un sito, questa regolazione dell'opacità è un cambiamento improvviso. Prima è grigio, e poi no, senza stati intermedi tra quei due. È come un interruttore della luce, acceso o spento. Questo potrebbe essere ciò che desideri, ma potresti anche voler sperimentare un cambiamento più graduale.
Per aggiungere un bell'effetto e rendere graduale questa dissolvenza, aggiungi il transizione proprietà:
.greydout
class:.greydout {
-opacità del webkit: 0,25;
-moz-opacità: 0,25;
opacità: 0,25;
-webkit-transition: facilità all 3s;
-moz-transition: facilita tutti i 3;
-ms-transizione: facilita tutti i 3;
-o-transizione: tutti i 3 facilitano;
transizione: tutti i 3 facilitano;
}