CSS3 ha supuesto una verdadera revolución para los diseñadores web y también para los desarrolladores. Poco a poco el soporte entre los navegadores va en aumento y aunque hoy en día todavía tengamos que usar para muchas propiedades de CSS3 los típicos prefijos de "moz" o "-webkit" la situación esta mejorando. Una de las cosas que más me ha gustado por parte de CSS3 es la posibilidad de trabajar con animaciones y transiciones. Las transiciones nos permiten realizar animaciones cortas muy similares a las capacidades que tiene JQuery como framework de Javascript. Eso sí mucho más encajadas dentro de la filosofía de CSS y con una sintaxis amigable. Vamos a ver un ejemplo sencillo del uso de la opacidad utilizando links y un cuadrado azul.
Vamos a ver el código fuente que realiza esta transición :
<html>
<head>
<style type="text/css">
#zona {
height: 200px;
width: 200px;
background: blue;
}
.oculta {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
opacity:0;
}
.muestra {
-webkit-transition-property: opacity;
-webkit-transition-duration: 1s;
opacity:1;
}
}
</style>
</head>
<body>
<div id="zona"></div>
<a href="#" id="muestra">muestra</a>
<a href="#" id="oculta">oculta</a>
</body>
</html>
El código que vemos genera una página html con dos enlaces el primero de ellos muestra un cuadrado y el segundo de ellos lo oculta utilizando JQuery como librería. Ambos trabajan utilizando una transición de CSS3. La transición a realizar es bastante sencilla ya que se asigna la propiedad a modificar, "opacity" y luego se marcan los tiempos que dura la transición "-webkit-transition-duration:1s" . El ejemplo se ha construido para que funcione sobre un navegador que soporte el motor de Webkit (Chrome,Safari). Ahora bien hay mucha gente que vería con buenos ojos una transición mas al estilo de JQuery con $("div").fadeOut() y $("div").fadeIn().
¿Podemos acercarnos con CSS3 a esto?
La realidad es que como la mayor parte de las veces una cosa es el API elemental que uno puede usar con la tecnología que corresponda y otra cosa muy diferente es apoyarnos en un framework para que nos ayude a resolver problemas. En este caso voy a usar uno de los frameworks de CSS que poco a poco se esta haciendo su hueco y se denomina Animate.css.
Este pequeño framework de CSS3 nos provee de un conjunto de animaciones sencillas de usar y predefinidas. De esta manera ya no tendremos que pensar tanto en como construir tal o cual tipo de animación ya que partimos de un conjunto amplio a nuestra disposición que nos reducirá el trabajo.
Para usar el framework de animación es tan sencillo como añadir el fichero CSS a nuestro documento HTML. Hecho esto las animaciones pasan a estar a nuestra disposición. Eso sí como todos los frameworks obliga a usar una sintaxis propia para acceder a ellas. A continuación podemos ver el mismo código anteriormente expuesto pero apoyandose en el sistema de animaciones de Animate.css
<html>
<head>
<LINK href="animate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#zona {
height: 200px;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div id="zona"></div>
<a href="#" id="muestra">muestra</a>
<a href="#" id="oculta">oculta</a>
</body>
</html>
La simplificación es clara.
En Genbeta Dev | Introducción a las reglas @media de CSS3
Ver todos los comentarios en https://www.genbeta.com
VER 0 Comentario