La nova evolució de CSS ofereix una extensa varietat de novetats que permeten crear un impacte visual en els dissenys de las pàgines web i fer de la navegació una experiència més agradable per a l’usuari. Entre aquestes novetats podem trobar nous efectes de text, millores en les interfícies d’usuari i animacions en certs elements del web. Veiem alguns exemples referents a aquest últim grup de novetats: transicions, transformacions, transformacions en tres dimensions i animacions. Per als exemples utilitzarem el motor de renderització webkit que trobem als navegadors Google Chrome i Safari.
Transicions
Les transicions permeten aplicar canvis en els estils d’un element de forma progressiva i no de forma directa. Per exemple, es possible definir una transició de tal manera que un bloc amplia la seva amplada de 150 píxels a 300 píxels al passar el ratolí, duent a terme aquest canvi en un interval de 2 segons i veient com l’amplada s’amplia durant aquest temps de forma progressiva. L’alternativa fins ara era ampliar-la fins als 300 píxels de forma puntual o dur a terme aquesta transició amb altres tècniques com ara animació mitjançant Javascript. Cal dir que les transicions de CSS3 són interpretades amb tots els motors de renderització dels navegadors actuals excepte el d’Internet Explorer.
#login_box
{
color: blue;
width: 150px;
font-size: 12px;
-webkit-transition: width 2s;
}
El que hem fet ara és transicionar la propietat width, de forma que quan aquesta canvii ho faci com una transició de 2 segons. Una forma de fer canviar una propietat és emprant un hover, és a dir, fer passar el ratolí per sobre l’element:
#login_box:hover
{
width:300px;
}
Tranformacions
Les transformacions que podem aplicar són 4: rotació, translació, escalat i esllavissament. A diferència de la tècnica de transició, les transformacions estan disponibles en qualsevol navegador, inclòs Internet Explorer.
#accommodation_pictures
{
-webkit-transform: rotate(30deg);
-webkit-transform: translate(50px,100px);
-webkit-transform: rotate(30deg);
-webkit-transform: scale(2,4);
-webkit-transform: skew(30deg,20deg);
}
També tenim les transformacions en tres dimensions que, malauradament, només són renderitzades pel motor webkit i, per tant, només disponibles navegant amb Google Chrome i Safari. Es poden realitzar les mateixes transformacions que les que hem comentat abans però les rotacions es poden fer en l’eix X i l’eix Y.
#accommodation_pictures
{
-webkit-transform: rotateX(120deg);
-webkit-transform: rotateY(180deg);
}
Animacions
Amb les animacions de CSS3 podem definir una serie de keyframes o passos que defineixen una animació completa. Podem definir la animació amb 2 estats de la següent forma:
@keyframes simple_animation
{
from {background: red;}
to {background: yellow;}
}
També podem definir una animació amb més estats, definint percentatges:
@-webkit-keyframes smooth_animation
{
0% {background: red;}
50% {background: orange;}
100% {background: yellow;}
}
Després, apliquen la animació i diem en quant de temps ha de transcórrer aquesta. Apliquem les dues que em creat a dos elements diferents:
#profile_picture:hover
{-webkit-animation: simple_animation 1s;}
#profile_picture:hover
{-webkit-animation: smooth_animation 1s;}
Les animacions encara no estan disponibles per als navegadors Internet Explorer i Opera, però sí per a la resta.
Conclusions
Un dels fets a remarcar com a conclusió és la progressiva delegació de tots els aspectes purament estilístics al CSS per alliberar al llenguatge d’scripting d’aquestes tasques, fet que accelera la renderització de les pàgines web i la separació de conceptes: programació i disseny.
