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!

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.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...

Da Photoshop al Codice HTML Css: 5° Aggiornamento

Dopo tanto tempo ecco due nuovi aggiornamenti alla lista, iniziata tempo fa, sui migliori tutorial per passare dal template photoshop al sito html css...