Informativa

Link che si illuminano con CSS3 – transition-property: color



In un precedente articolo avevamo visto come realizzare con jQuery dei link che si illuminano in maniera graduale. In realtà dire che i link si “illuminano” è improprio, l’effetto illuminazione lo abbiamo solo passando da un colore più scuro ad uno più chiaro, ma ovviamente si può passare da un qualsiasi colore ad un altro. L’effetto consiste in una sorta di transizione che avviene in un determinato tempo e quindi il colore di “hover” arriva mediante un cambiamento graduale del colore.

transition-color

Un effetto del tutto simile è possibile implementarlo nel nostro template anche tramite CSS3. In questo caso è decisamente tutto più semplice, l’unico problema è che avremo meno compatibilità con i browser. I browser più datati infatti non leggono questa proprietà CSS3, quindi in questo caso non vedremo nessun effetto di transizione, ma solo un cambio netto da un colore ad un altro.

Link che si illuminano con CSS3 – regola da implementare

Provo a spiegare in modo semplice, anche seguitemi guardando l’esempio che ho creato per voi qui: http://jsfiddle.net/svegliadesign/qs1zqw95/

Nella parte HTML ho messo 3 link in un elenco “li” questi sono racchiusi nel div con id=”navigation”, nel CSS ho fatto come facciamo sempre creando la regola #navigation li a per dare il colore al link e la regola #navigation li a:hover per dare il colore sull’hover, nella parte con #navigation li a:hover ho aggiunto due semplici linee:

transition-property: color;
transition-duration: 2s;

Come potete facilmente intuire la prima dice linea di codice CSS di applicare a “color” un effetto di transizione, mentre la seconda indica la durata dell’effetto per passare da un colore ad un altro, in questo caso 2 secondi. Semplice vero?

Il medesimo èffetto si può applicare a anche al colore di sfondo un box, scrivendo semplicemente, magari in un prossimo articolo vi scriverò un esempio, ma potete provare già voi stessi a divertirvi.

transition-property: background-color;

Come vedete non c’è assolutamente niente di complicato, ma questo semplice effetto renderà i vostri progetti più accattivanti e moderni.

Lascia un commento

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