HTML e CSS Tutorial: Opacità Degli Elementi

• Tweet

• Tweet

Oggi nasce una nuova rubrica su FedeWeb, HTML e CSS Tutorial, dove presenterò semplici trucchi html e css che potrebbero aiutarti nello sviluppo di pagine web.

Cominciamo: vedi nella barra laterale, dove ci sono le icone di twitter, facebook, ecc, sotto la scritta Follow me?

Prova a passare sopra con il mouse..come vedi si “accendono” e si “spengono”.

Questo effetto l’ho ottenuto “giocando” con le opacità, aggiugendo le proprietà opportune sfruttando gli stili CSS.

Andiamo a vedere come..

Codice html:
<ul>
<li id="twitter"><a href="http://twitter.com/fedeweb" title="Seguimi su Twitter!"><img src="http://www.fedeweb.net/wp-content/themes/fedeweb/images/twitter.png"/></a></li>


<li id="face"><a href="http://www.facebook.com/federico.pian?ref=profile#/federico.pian?ref=profile" title="Seguimi su Facebook!"><img src="http://www.fedeweb.net/wp-content/themes/fedeweb/images/facebook.png" /></a></li><br/>


<li id="friendfeed"><a href="http://friendfeed.com/fedeweb" title="Seguimi su Friendfeed!"><img src="http://www.fedeweb.net/wp-content/themes/fedeweb/images/friendfeed.png" /></a></li>


<li id="flickr"><a href="http://www.flickr.com/photos/fedeweb" title="Seguimi su Flickr!"><img src="http://www.fedeweb.net/wp-content/themes/fedeweb/images/flickr.png" /></a></li>


<li id="youtube"><a href="http://www.youtube.com/user/federicopian" title="Seguimi su Youtube!"><img src="http://www.fedeweb.net/wp-content/themes/fedeweb/images/youtube.png"/></a></li>


</ul>


Codice css:
#twitter a, #face a,#flickr a,#friendfeed a, #youtube a {
filter:alpha(opacity=50);
-moz-opacity:.5;
opacity: .5;}
#twitter a:hover, #face a:hover,#flickr a:hover,#friendfeed a:hover, #youtube a:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}

Come vedi ho agito sui selettori a e a:hover. Tramite questi selettori possiamo modificare gli attributi per i link, e l’effetto al passaggio del mouse (hover) sopra i link stessi.

Lasciando il codice così com’è c’è un problema: tanto per cambiare in internet explorer l’effetto non funziona: come fare?

Aggiungi l’attributo zoom: 1 e tutto come per magia funzionerà anche su Internet Explorer!