sábado, 14 de junio de 2014

Un formulario que parpadee



1. Objetivo

Queremos resaltar un formulario en un página web haciendo que su borde parpadee. No es muy "estético", ¡pero se trata de un ejemplo!


2. La estructura del formulario

Vamos a crear un formulario normal y corriente:

<form id="registro" method="#" action="#">
<p>
<label for="nombre">Su nombre: </label>
<input type="text" id="nombre" />
</p>
<p>
<label for="email">Su e-mail: </label>
<input type="email" id="email" />
</p>
<p>
<input type="submit" id="enviar" value="Enviar" />
</p>
</form>


3. El diseño

Le aplicaremos un diseño al formulario con los estilo CSS3 habituales:

#registro{
width: 300px;
padding: 10px;
border: 1px solid #333;
border-radius: 10px;
}


4. La animación

Para hacer que el borde del formulario parpadee, vamos a aplicarle una sombra que pasará de rojo a amarillo.

Vamos a crear una animación a la que llamaremos sombra. En la primera etapa, en el 0%, definimos una sombra roja de 15 píxeles y, en el 100%, una sombra amarilla.

@-webkit-keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}
@-moz-keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}
@keyframes sombra {
0% {
box-shadow: 0 0 15px red;
}
100% {
box-shadow: 0 0 15px yellow;
}
}

Vamos a aplicar esta animación al formulario. La animación tendrá un movimiento ease-in (se acelerará al final), no tendrá fin (infinite), alternará el sentido de la animación (alternate) y durará 500 milisegundos (500ms).

#registro {
width: 300px;
padding: 10px;
border: 1px solid #333;
border-radius: 10px;
/* Animación */
-webkit-animation: sombra ease-in infinite alternate 500ms;
-moz-animation: sombra ease-in infinite alternate 500ms;
animation: sombra ease-in infinite alternate 500ms;
}


5. La visualización

Este será el resultado obtenido: ¡image que el borde parpadea y que le escuecen los ojos de verlo!



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada