Applicare la trasparenza con i CSS

effetto-trasparenzacss

Solitamente quanto dobbiamo creare dei rollover con effetto alpha realizziamo due immagini, una normale e una con alpha 50% e poi attraverso un CSS effettuiamo lo swap delle 2 immagini.
Ebbene questo non è l’unico modo di riprodurre l’effetto, infatti non tutti sanno che grazie ai CSS si può applicare direttamente su un’immagine l’effetto dissolvenza e quindi creare un rollover utilizzando una sola immagine.
Il codice da utilizzare, per esempio sull’azione hover di un tag A, è il seguente

a:hover {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, la vecchia versione di safari */
-moz-opacity: 0.5; /* firefox, mozilla, netscape */
opacity: 0.5; /* safari, chrome, opera */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /*internet explorer 8 */
}

Come potete vedere ho riportato tutti gli stili da applicare per ottenere una compatibilità con i maggiori browser moderni, questo perchè l’attributo non è standard e viene interpretato in modo diverso da browser a browser.
Nell’esempio che ho riportato ho impostato un effetto di dissolvenza del 50%, per modificarlo vi basterà solamente cambiare il parametro numerico, che in base al browser su cui si vuole applicare varia da un range che oscilla da 0 a 1 (per khtml, mozilla, firefox, netscape, safari, chrome e opera) a un range che varia da 0 a 100 (per internet explorer)

Potrebbero interessarti anche...

Una risposta

  1. alex99 scrive:

    ciao,ho 1 sito di grafica,e vorrei fare grafiche che abbiano lo sfondo trasparente.
    halp me!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Facebook Auto Publish Powered By : XYZScripts.com