Se volete mettere in risalto un testo un idea interessante potrebbe essere renderlo lampeggiante. Grazie alle animazioni che si possono creare con CSS3 diventa un operazione piuttosto semplice e può dare quel tocco di stile in più. Codice CSS:
[css]
/* Creiamo una regola CSS che andrà a definire l’animazione nei suoi vari stadi
dove "regoliamo" il valore della proprietà opacity, potenzialmente possiamo
variare tutte le proprietà css che vogliamo. */
@-webkit-keyframes blinker
{
0% { opacity: 0.3; }
50% { opacity: 1.0; }
100% { opacity: 0.3; }
}
/* Creiamo adesso la classe css che conterrà l’animazione, specificandogli il
numero di iterazioni da eseguire e la funzione di timing */
.css3_blink
{
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
color: green;
}
[/css]
Teniamo presente che il codice css possiamo scriverlo nella head della pagina all’interno di un tag style oppure richiamando un file .css che conterrà il codice. Fatto questo ci basterà richiamare la nostra classe CSS in un tag HTML, ad esempio:
[html]<span class="css3_blink"> testo lampeggiante </span>[/html]
Leave A Comment