HTML e CSS Tutorial: Opacità Degli Elementi
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!
4 Commenti
Questa tecnica è molto interessante e altrettanto gradevole.Grazie per la spiegazione 😉
attributo zoom: 1?, forse intendevi opacity: 1
No no..proprio zoom:1. Provare per credere…
[…] 1) HTML e CSS Tutorial: Opacità Degli Elementi […]