Rieccoci ad un nuovo appuntamento con i CSS3 dove esploriamo le funzionalità introdotte dal nuovo standard e vediamo insieme come puoi utilizzarle durante l'impaginazione del tuo sito web.
Oggi farò una panoramica su due particolari caratteristiche che ti permetteranno di animare il tuo codice senza utilizzare immagini e/o javascript.
Tutorial precedenti
- La proprietà Border Radius
- La pseudo-classe :target
La proprietà transform
Attraverso transform potrai applicare una trasformazione 2D o 3D ad un elemento HTML. In pratica puoi ruotare, scalare, muovere, etc... un qualsiasi elemento della tua pagina.
La sintassi è molto semplice:
transform: none|transform-functions;
Se imposti il valore none vai a definire che non ci deve essere nessuna trasformazione. Oppure puoi definire diverse funzioni di trasformazione, come ad esempio:
- Ruotare (passandogli l'angolo di rotazione):
#elemento
{
transform:rotate(45deg);
}
- Spostare l'elemento su un solo asse, su 2 dimensioni - translate(x,y) - o su piano 3d - translate3d(x,y,z)
#elementoX
{
transform:translateX(15px);
}
#elementoY
{
transform:translateY(25px);
}
#elementoZ
{
transform:translateZ(5px);
}
#elemento2d
{
transform:translate(30px,18px);
}
#elemento3d
{
transform: translate3d(30px,10px,5px);
}
- Scalare in base alla percentuale passatagli come valore:
#elementoX
{
transform:scaleX(1.5);
}
#elementoY
{
transform:scaleY(2);
}
#elementoZ
{
transform:scaleZ(1.1);
}
#elemento2d
{
transform:scale(2,3);
}
#elemento3d
{
transform: scale3d(1.1,2,1.4);
}
Come sempre ti consiglio di avere sempre come riferimento il sito W3C per un dettaglio completo delle funzioni accettate come parametro.
Il rule @keyframes
Attraverso il rule @keyframes puoi creare delle vere e proprie animazioni semplicemente modificando i CSS a runtime. Vediamo la sua sintassi per capire meglio:
@keyframes animationname {
keyframes-selector {css-styles;}
}
Dove:
- l'attributo animationname, come indica la parola stessa, è il nome da attribuire all'animazione;
- keyframes-selector rappresenta la percentuale della durata dell'animazione;
- in css-styles vai a definire gli stili css da attribuire in fase di animazione ad ogni selettore.
Ad esempio puoi utilizzare questo rule per spostare un elemento modificando a runtime la sua posizione top e left:
@keyframes animazione1
{
from {top:0px;left:0px;}
25% {top:200px;left:200px;}
50% {top:100px;left:100px;}
75% {top:150px;left:150px;}
to {top:0px;left:0px;}
}
E puoi richiamarlo attraverso la proprietà animation, in questo modo:
#elemento1
{
animation-name: animazione1;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
Maggiori dettagli sulle funzioni di animation sul sito W3C.
Esempio pratico: un'icona di loading senza immagini animate o flash
Adesso che ho fatto una panoramica su queste due funzionalità ti mostrerò come utilizzarle insieme per creare un'icona di loading senza utilizzare immagini animate o flash. Questo sarà il codice CSS del nostro esempio:
body
{
background-color: #fff;
}
h1
{
font-size: 1.5em;
font-weight: normal;
margin: 0 0 1em 0;
color: #dc143c
}
h2, h2 a
{
font-size: 1.3em;
font-weight: normal;
margin: 0;
color: #ff8c00
}
#loader
{
position: relative;
top: 20px;
left:20px;
width: 30px;
height: 30px;
border: 8px solid #6495ed;
border-right-color: transparent;
border-radius: 50%;
box-shadow: 0 0 25px 2px #ff7f50;
-webkit-animation: icon 1s linear infinite;
-moz-animation: icon 1s linear infinite;
-ms-animation: icon 1s linear infinite;
-o-animation: icon 1s linear infinite;
animation: icon 1s linear infinite;
}
@-webkit-keyframes icon
{
from { -webkit-transform: rotate(0deg); opacity: 0.4; }
50% { -webkit-transform: rotate(180deg); opacity: 1; }
to { -webkit-transform: rotate(360deg); opacity: 0.4; }
}
@-moz-keyframes icon
{
from { -moz-transform: rotate(0deg); opacity: 0.4; }
50% { -moz-transform: rotate(180deg); opacity: 1; }
to { -moz-transform: rotate(360deg); opacity: 0.4; }
}
@-ms-keyframes icon
{
from { -ms-transform: rotate(0deg); opacity: 0.4; }
50% { -ms-transform: rotate(180deg); opacity: 1; }
to { -ms-transform: rotate(360deg); opacity: 0.4; }
}
@-o-keyframes icon
{
from { -o-transform: rotate(0deg); opacity: 0.4; }
50% { -o-transform: rotate(180deg); opacity: 1; }
to { -o-transform: rotate(360deg); opacity: 0.4; }
}
@keyframes icon
{
from { transform: rotate(0deg); opacity: 0.2; }
50% { transform: rotate(180deg); opacity: 1; }
to { transform: rotate(360deg); opacity: 0.2; }
}
L'elemento #loader non sarà altro che un div privo di contenuto al quale verrà applicata l'animazione specificata nel CSS.
Clicca qui per la demo
Applicando un pò di javascript puoi utilizzare questo codice per utilizzare questa animazione con le chiamate asincrone Ajax senza appesantire la pagina con immagini animate.
Supporto e compatibilità
Come puoi vedere è importante aggiungere il prefisso dei vari browser (-webkit, -moz, -ms, -o) per aumentare la compatibilità con la maggior parte di essi. Purtroppo ci sono i soliti problemi su Internet Explorer ed Opera che non supportano @keyframes e animation.
Vi segnalo anche questo sito dove potete vedere alcuni esempi di forme geometriche e non realizzate con i CSS3: CSS3 Shapes.
Cosa ne pensi di queste due funzionalità? Le hai mai utilizzate?
Libri consigliati per imparare e studiare il CSS3
b7b643b6-bf4c-4e85-82a8-617ece1edc58|0|.0