Scritto il 13/11/2011 da Filippo Matteo Riggio
Girovagando per il web ho trovato un effetto con i nuovi css3 molto carino., fatto utilizzando i tag introdotti nella terza versione di CSS.
Attraverso questi nuovi standard si possono applicare effetti molto carini al testo.
Seguendo questo link potrete vedere una demo.
Per prima cosa l’HTML: la suddivisione del testo del link in span serve per la stilizzazione attraverso i CSS.
<div id="animationWrapper">
<a href="/">
<span>Good2know</span>
<span>F. Matteo</span>
<span>Riggio</span>
<span>Webmaster's Blog</span>
</a>
</div>
Ora la parte del codice CSS: molto interessante l’utilizzo della sintassi per l’animazione applicata sul link e sugli span.
/* wrapper dell'animazione */
#animationWrapper {
width:530px;
font-family: Arial,sans-serif;
background: #222;
padding:40px;
}
/* link che include gli span */
#animationWrapper a {
font-weight: 800;
text-transform: uppercase;
font-size: 42px;
line-height: 0.9em;
margin-bottom: 10px;
display: block;
position: relative;
color: #E58;
text-decoration: none
}
/* animazioni css 3 */
#animationWrapper a, #animationWrapper span {
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
-ms-transition: all 0.12s ease-out;
transition: all 0.12s ease-out;
}
#animationWrapper span {
display: block;
color: #555;
text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}
/* dimensioni speciali per il primo span */
#animationWrapper .span1 {
font-size: 76px;
line-height: 0.8em;
}
#animationWrapper a:hover {
color: #fff ;
top: -3px;
left: -3px;
}
/* gli span diventano bianchi sull'hover */
#animationWrapper a:hover span {
color:#fff;
}
/* colori differenti per gli span */
#animationWrapper a:hover .span1 {
text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}
#animationWrapper a:hover .span2 {
text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}
#animationWrapper a:hover .span3 {
text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}
#animationWrapper a:hover .span4 {
text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}
Potrete utilizzare questo effetto per header o banner ad effetto senza andare ad utilizzare javascript o flash.
In un prossimo articolo descriverò più in profondità quelle che sono le varie transizioni possibili con CSS 3.
Alla prossima!
Iscriviti al feed di Good2know