Categoria: Web Design

È davvero possibile creare delle animazioni su una pagina web utilizzando semplicemente CSS3?

La risposta è…certo che si!

Con l’arrivo di CSS3 i web designer hanno potuto iniziare ad inserire, all’interno dei loro progetti, delle splendide animazioni che prima venivano fatto in Flash o in Javascript.

Vediamo insieme allora come funzionano le animazioni con CSS3!

Per prima cosa dobbiamo definire un’animazione e darle un nome tramite la keywork @-keyframes, ed indicare in essa quali saranno i comportamenti dell’elemento che vogliamo animare.

Supponiamo di voler creare una semplice animazione, che cambi il colore di sfondo di un elemento continuamente:

@-keyframes "change-background"{
0%{
   background: "blue";
}
25%{
   background: "green";
}
50%{
   background: "yellow";
}
75%{
   background: "orange";
}
100%{
   background: "red";
}
}

La percentuale definita nell’animazione ci permette di decidere quando modificare l’elemento. In questo caso avremmo un cambio di background costante durante l’animazione, ma avremmo anche potuto decidere di far durare lo sfondo giallo più di quello arancione per esempio.

A questo punto, per poter utilizzare la nostra animazione fatta con CSS3, non ci resta altro da fare che richiamare la nostra animazione “change-background” all’interno della definizione CSS di un elemento.

Supponiamo di avere nella nostra pagina il seguente elemento HTML:

<div id="testElement">Test</div>

Benissimo per completare e vedere la nostra animazione fatta con CSS3, non ci resta altro che scrivere il seguente codice CSS:

#testElement{
   width:200px;
   height:200px;
   border: 1px solid #000;
   animation-name: change-background; /* Nome dell'animazione da richiamare */
   animation-duration: 10s; /* Durata dell'animazione */
   animation-animation-iteration-count: infinite; /* Numero di ripetizioni dell'animazione, possiamo infatti decidere di far partire l'animazione solo 1 volta per esempio */
   animation-timing-function: linear; /* Modo in cui l'animazione viene eseguita  */
}

Abbiamo visto in questo articolo quanto sia semplice creare un animazione in CSS3, infatti non ci sono limiti in termini di animazioni che si possono realizzare.

Per gestire la parte grafica di una pagina web è fondamentale conoscere i fogli di stile CSS.

Grazie a questi speciali fogli è possibile gestire ogni singolo aspetto, di ogni singolo elemento presente sulla pagina. Dimensione e colore del carattere, colore di sfondo, animazioni e molto altro.

Impostare lo sfondo di un elemento è semplice. Ci basta utilizzare le proprietà background-color o background-image o più semplicemente background.

Per impostare un colore di sfondo (rosso ad esempio) ci basta utilizzare il seguente codice:

#contenitore{
   background-color: #ff00000;
}

Il testo “#ff0000” indica il codice esadecimale del colore rosso. Ma con i CSS possiamo utilizzare anche i colori RGB oppure scrivere semplicemente il nome del colore in inglese (nel nostro esempio avremmo dovuto scrivere “red”).

Per impostare invece un’immagine di sfondo basta specificare l’url dell’immagine:

#contenitore{
   background-image: url('percorso/verso/immagine/sfondo.jpg');
}

Grazie poi a diverse proprietà come background-repeat, background-position e molte altre, possiamo gestire il comportamento dell’immagine di sfondo.