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!

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

HTML e CSS Tutorial: Utilizzare gli em al posto dei pixel

Continua la rubrica Html e CSS Tutorial, dove oggi andremo a vedere come è possibile utilizzare l'unità di misura em, al posto dei pixel, in modo...

Ecco Un Po’ di Risorse Per Affrontare Internet Explorer

Internet Explorer..solo a sentire il nome mi viene quasi ribrezzo. Quante ore spese a capire come posizionare correttamente un div, a mettere le...

Dal Template Photoshop Al Codice HTML CSS: 4° Aggiornamento

Nuovo aggiornamento per l'articolo iniziato tempo fa dove raccolgo i migliori tutorial in italiano e in inglese per realizzare il template in...