I web designer avevano a lungo desiderato un maggiore controllo sulle pagine che stavano creando quando i CSS3 facevano la loro comparsa. I nuovi stili introdotti in CSS3 hanno dato ai professionisti del Web la possibilità di aggiungere effetti di tipo Photoshop alle loro pagine. Questo includeva proprietà come ombre esterne e bagliori, angoli arrotondati e altro ancora. CSS3 ha anche introdotto effetti di animazione che possono essere utilizzati per creare una piacevole interattività sui siti.
Un effetto visivo molto bello che puoi aggiungere agli elementi nel tuo sito web usando CSS3 è quello di renderli sfumati dentro e fuori usando una combinazione di proprietà per opacità e transizione. Questo è un modo semplice e ben supportato per rendere le tue pagine più interattive creando aree sbiadite che vengono messe a fuoco quando un visitatore del sito fa qualcosa, come passare il mouse sopra quell'elemento.
Diamo un'occhiata a quanto è facile aggiungere questo effetto visivo interagente a vari elementi sulle tue pagine web.
Cambia opacità su passaggio del mouse
Inizieremo osservando come modificare l'opacità di un'immagine quando un cliente passa con il mouse sopra quell'elemento. Per questo esempio (l'HTML è mostrato sotto) stiamo usando un'immagine con l'attributo class di
greydout.
Per renderlo grigio, aggiungiamo le seguenti regole di stile al nostro foglio di stile CSS: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;opacità: 0,25;}
Queste impostazioni di opacità si traducono al 25%. Ciò significa che l'immagine verrà visualizzata come 1/4 della sua normale trasparenza. Completamente opaco senza trasparenza sarebbe 100% mentre 0% sarebbe totalmente trasparente. Quindi, per rendere l'immagine chiara (o più accuratamente, per diventare completamente opaca) quando il mouse si posiziona sopra di essa, devi aggiungere il : hoverpseudo-classe: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;opacità: 1;}
Si noterà che, per questi esempi, stiamo utilizzando le versioni con prefisso del fornitore della regola per garantire la compatibilità con le versioni precedenti di tali browser. Mentre questa è una buona pratica, la realtà è che la regola di opacità è ora ben supportata dai browser ed è abbastanza sicuro abbandonare quelle linee con prefisso dei venditori. Tuttavia, non vi è alcun motivo per non includere questi prefissi se si desidera garantire il supporto per le versioni precedenti del browser. Assicurati solo di seguire le migliori pratiche accettate per terminare la dichiarazione con la versione normale e non prefissata dello stile. Se lo hai distribuito su un sito, vedresti che questa correzione dell'opacità è un cambiamento molto brusco. Primo, è grigio e poi non lo è, senza stati intermedi tra questi 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 effetto davvero piacevole e rendere questa dissolvenza graduale, si desidera aggiungere il transizione
proprietà al .greydoutclasse: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;opacità: 0,25;-webkit-transition: tutti e 3 gli agio;-moz-transition: tutti e 3 gli agio;-ms-transition: tutti e 3 gli agio;-o-transizione: tutti i 3s si rilassano;transizione: tutti e 3 gli agio;}
