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

Rieccoci al secondo appuntamento con i CSS3 e le proprietà principali per impaginare una pagina web, meglio se HTML5, funzionale ed interattiva grazie alle nuove funzionalità introdotte. Tutorial precedenti - La proprietà Border Radius La pseudo-classe :target Sicuramente avrai già utilizzato altre pseudo classi con i CSS2, come ad esempio :hover e :active. I CSS3 ne introducono una nuova - :target - che ti permetterà di applicare a runtime lo... [Continua...]

Con questo post inauguro una serie di articoli sulle proprietà del CSS3 presentandoti gradualmente alcune caratteristiche fondamentali per impaginare testi ed immagini nei tuoi siti web. Ti ricordo che i nuovi style CSS3 non sono supportati ancora da tutti i browser (il punto dolente è sempre il solito Explorer) e dato che la maggior parte delle features è già integrata in Mozilla e Safari ti consiglio di aggiungere l'opzione -moz e -webkit nei tuoi css. Cominciamo!... [Continua...]

Sempre più siti utilizzano come sfondo un immagine a pieno schermo - full background - e in questo post ti mostrerò due metodi per realizzarlo facilmente. Metodo 1: CSS3, semplice e responsive Con la nuova proprietà del CSS3, background-size, puoi semplicemente impostare un immagine come sfondo che si adatterà in modo automatico alla pagina senza dipendere dalle dimensioni dello schermo. E' quindi una soluzione responsive! Basta modificare solo il tuo CSS, in que... [Continua...]

Abbiamo più volte affrontato il tema HTML5 e CSS3 che sono, e continueranno ad essere, il punto di riferimento fondamentale per chi lavora con il web su tutti i tipi di dispositivi. Essendo una tecnologia in continua evoluzione, i broswer web non riescono ad implementare tutte le features in una sola release e, per chi sviluppa, la domanda è sempre la stessa: "ma funzionerà su tutti i browser?". Dando per scontato il concetto che l'utente finale deve essere sempr... [Continua...]

Perchè il web nel settore mobile non decolla come dovrebbe? Perchè la maggior parte degli utenti - pur in possesso di uno smartphone all'ultimo grido - non si  connettono al proprio sito preferito attraverso il piccolo browser mobile? Queste sono alcune domande che si è posto Maximiliano Firtman - autore di diversi libri per sviluppatori informatici e conosciuto nel campo dello sviluppo mobile - e la sua risposta è stata: "La colpa è degli sviluppatori!".... [Continua...]