ANIMACIÓN AL CARGAR LA PÁGINA CON CSS3

Una de las ventajas de saber exprimir las capacidades de CSS3, es que podemos realizar animaciones sin la necesidad de recurrir a plugins u otro tipo de lenguajes de programación.

Me refiero al uso de los Keyframes Animation, las Transitions y las Transformaciones, módulos con los que podremos lograr efectos bastante espectaculares de forma sencilla.

Como ya he dicho en anteriores ocasiones, la ventaja de utilizar CSS3 es que es ligero y versátil (sobretodo comparado con javascript). Además, en el caso de las animaciones, los efectos se suavizan, lo cual supone una mejora en la parte estética y experiencia del usuario.

En el ejemplo que voy a tratar en este artículo, vamos a combinar dos efectos sobre un mismo div. Ambos tendrán lugar en el momento de la carga de la página, y lograremos con ello dinamizar de forma atractiva nuestro site.

EL EJEMPLO

La idea consiste en:

Animar el emplazamiento de una caja: En nuestro caso utilizaremos un div, pero bien podríamos emplear cualquier otro objeto (header, footer, article, a,…). El elemento en cuestión caerá desde el marco superior del monitor, cual pieza de tetris, y se ubicará en la posición que designemos.

Animar la aparición progresiva del elemento: Quizá nos suene más como FadeIn (“desvanecimiento” en inglés). Sea como sea, lograremos con ello un efecto visual muy interesante y sutil. A mi particularmente me gusta usarlo bastante en mis Diseños y creaciones web.

El código HTML5

<div class="caja">
<p>Este objeto cae desde la parte de arriba de la pantalla, a la vez que aparece de foma suave y sutil.</p>
</div>

El código CSS3

.caja
{
width: 40%;
margin: 15% 0 0 30%; /*Margen superior del 20% y luego centramos con un margen lateral izquierdo del 30%*/
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Definimos un nombre para la animación (“aparecer”), un tiempo total de 4segundos de duración y un movimiento suavizado al final*/
-webkit-animation: aparecer 4s ease-out 1;/*Chrome, Safari, Android, iOs*/
-moz-animation: aparecer 4s ease-out 1; /*Firefox*/
-o-animation: aparecer 4s ease-out 1; /*Opera*/
-ms-animation: aparecer 4s ease-out 1; /*Internet Explorer*/
}

Y a continuación definimos qué propiedades queremos animar y cómo en el tiempo:

@keyframes aparecer {
from {margin-top: -50%; opacity: 0;}  /*Nótese el margen negativo para situarlo bien arriba*/
50% {margin-top: 10%; opacity: 0.2;} /*Vemos que cuando haya transcurrido el 50% del tiempo, es decir, 2s, el margen superior ha pasado de -50% a 10%, y la opacidad de 0 a 0.2*/
to {margin-top: 15%; opacity: 1;} /*Es el ultimo fotograma de la animación, o punto final*/
}

Incluimos los prefijos necesarios para todos los navegadores:

@-o-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-moz-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-webkit-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}
@-ms-keyframes aparecer {
from {margin-top: -50%; opacity: 0;}
50% {margin-top: 10%; opacity: 0.2;}
to {margin-top: 15%; opacity: 1;}
}

Y ya para terminar, si aprovechamos el ejemplo de mi artículo anterior, en el cual centrábamos el div en nuestra pantalla, el código quedaría del siguiente modo:

.caja
{
position: absolute;
width: 30%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border: 1px solid;
text-align: center;
animation: aparecer 4s ease-out 1; /*Añadir los correspondientes prefijos a los diferentes navegadores*/
}
@keyframes aparecer { /*Añadir los correspondientes prefijos a los diferentes navegadores*/
from {top: -150%; opacity: 0;}
50% {top: 40%; opacity: 0.2;}
to {top: 50%; opacity: 1;}
}

Espero que te haya resultado útil. Y no olvides compartirlo en Twitter!!

Manuel Córdoba

CSS3: CENTRAR OBJETO HORIZONTAL Y VERTICALMENTE SIN MEDIDAS CONOCIDAS

centradoTodos los que nos dedicamos al Diseño de páginas web, sabemos que la maquetación basada en tablas ya es algo antediluviano y obsoleto. Así pues, por regla general, usaremos las tablas para mostrar contenidos que nos interese organizar en filas y columnas de forma expresa.

Para los que aprendieron a maquetar usando tablas, esto plantea un problema sobre cómo centrar objetos dentro de otros, especialmente si no disponemos de anchos y/o altos fijos de la caja padre.

Lo cierto es que, si hay algo que criticar a CSS3, es la falta de comandos operativos para realizar algo tan básico como lo es el centrado de los elementos.
Todos conocemos algunos hacks famosos y archiconocidos como el “margin: 0 auto;”, el cual centrará el elemento sólo de forma horizontal, y sólo si definimos como posición relative o static.

A partir de ahí, nos encontramos ante un séquito de soluciones nada intuitivas, la mayoría de las cuales cuentan con que la anchura y/o la altura de la caja son parámetros que vamos a expresar en unidades absolutas (px). Y qué ocurre si lo que queremos es optar por diseños fluidos y adaptativos? Es decir, trabajar con unidades relativas (%)?

LA SOLUCIÓN

La solución que propongo aquí, consiste en utilizar la propiedad transform para poder centrar horizontal y verticalmente uno o varios elementos.

En el siguiente ejemplo, vamos a centrar algo tan sencillo como una caja que aloja texto dentro del body.

El código HTML5

<div class="caja">
<p>Mediante el presente texto comprobamos como la caja se centra tanto horizontal como horizontalmente.</p>
</div>

El código CSS3

.caja
{
position: absolute; /*aunque en determinadas ocasiones podría interesarnos “relative”*/
width : 30%; /*el valor que queramos*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); /*aplicamos los prefijos para los distintos navegadores*/
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

Sin más por el momento, espero que te resulte útil en tus diseños!
Y si tienes cualquier idea o sugerencia, no dudes en dejarme un comentario.

Manuel Córdoba