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!
Twittear
No hay comentarios:
Publicar un comentario