Generalmente los campos <input> de formulario para subir ficheros en HTML suelen ser bastante aburridos en su implementación por defecto. Por supuesto existen librerías y técnicas que permiten hacerlos mucho más atractivos y funcionales, pero generalmente requieren utilizar librerías JS como jQuery o jQuery UI. Sin embargo con un poco de CSS3 y sin aplicar JavaScript podemos dotar de un nuevo aire a nuestros formularios.

formulario-efecto-pulsante

Primero el HTML

Como cualquier ejemplo de HTML y CSS comenzaremos primero por incluir nuestro código HTML con un formulario muy simple. Me he basado en Twitter Bootstrap para dotar de un estilo mínimo al resto de campos.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<meta charset="UTF-8" />
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">Nombre</label>
<input type="text" class="form-control" id="name" />
<label for="apellidos">Apellidos</label>
<input type="text" class="form-control" id="apellidos" />
</div>
<label for="photo">Incluya una foto</label>
<div class="drag-drop">
<input type="file" multiple="multiple" id="photo" />
<span class="fa-stack fa-2x">
<i class="fa fa-cloud fa-stack-2x bottom pulsating"></i>
<i class="fa fa-circle fa-stack-1x top medium"></i>
<i class="fa fa-arrow-circle-up fa-stack-1x top"></i>
</span>
<span class="desc">Pulse aquí para añadir archivos</span>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
<button type="reset" class="btn btn-default">Cancelar</button>
</form>
</body>
</html>

Como podréis ver he incluido en el <head> un enlace a la web de TwitterBootstrap en el link; y por otro lado utilizaremos los iconos de FontAwesome para dotar de diseño gráfico al campo.

Ahora incluimos los estilos

Ahora podemos incluir en un .css aparte o bien en el <head> dentro de etiquetas <style> el resto de estilo que se aplicarán para este ejemplo en concreto. Para esta prueba simplemente incluiremos los siguientes estilos:

form {
width: 25em;
padding: 1em;
border: 1px solid #ccc;
border-radius: .5em;
margin: 1em;
box-shadow: .25em .25em 0 #ccc;
}
 
/* Estilo del área del input[file] */
.drag-drop {
height: 8em;
width: 8em;
background-color: #ccc;
border-radius: 4em;
text-align: center;
color: white;
position: relative;
margin: 0 auto 1em;
}
 
.drag-drop span.desc {
display: block;
font-size: .7em;
padding: 0 .5em;
color: #000;
}
 
input[type="file"] {
height: 10em;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%; 
z-index: 3;
}
 
/* Estilo del área del input[file] con :hover */
 
.drag-drop:hover, input[type="file"]:hover {
background-color: #3276b1;
cursor: pointer;
}
 
.drag-drop:hover span.desc {
color: #fff;
} 
 
/* Composición del icono de Upload con FontAwesome */
.fa-stack { margin-top: .5em; }
 
.fa-stack .top { color: white; }
 
.fa-stack .medium { 
color: black;
text-shadow: 0 0 .25em #666;
}
 
.fa-stack .bottom { color: rgba(225, 225, 225, .75); }

Con estos estilos observaremos cómo ya no aparece el campo <input>, sino que ahora ha sido sustituido por un div circular y un atractivo icono que invita a pinchar para añadir ficheros. Incluso contamos con un efecto hover que cambiar el fondo del <div> si pasamos el ratón por encima. No está mal de momento.

Añadamos el efecto pulsante

Por último añadiremos los estilos oportunos para que cuando el ratón se sitúe sobre el icono de subir un fichero realice un efecto de «pulsación» por medio de una animación simple en CSS3 que lo haga más atractivo. A los estilos anteriores simplemente añadiremos las siguientes lineas:

.drag-drop:hover .pulsating {
animation: pulse1 1s linear infinite;
animation-direction: alternate ;
-webkit-animation: pulse1 1s linear infinite;
-webkit-animation-direction: alternate ;
}
 
/* Keyframing de la animación */
 
@keyframes pulse1 {
0% { color: rgba(225, 225, 225, .75); }
50% { color: rgba(225, 225, 225, 0.25); }
100% { color: rgba(225, 225, 225, .75); }
}
 
@-moz-keyframes pulse1 {
0% { color: rgba(225, 225, 225, .75); }
50% { color: rgba(225, 225, 225, 0.25); }
100% { color: rgba(225, 225, 225, .75); }
}
 
@-webkit-keyframes pulse1 {
0% { color: rgba(225, 225, 225, .75); }
50% { color: rgba(225, 225, 225, 0.25); }
100% { color: rgba(225, 225, 225, .75); }
}
 
@-ms-keyframes pulse1 {
0% { color: rgba(225, 225, 225, .75); }
50% { color: rgba(225, 225, 225, 0.25); }
100% { color: rgba(225, 225, 225, .75); }
}

Con esto tenemos un interesante efecto de pulsación en el icono del campo que consigue que nuestro formulario sea más atractivo. Si queréis consultar el código funcionando sin tener que ir copiando o pegando podéis pulsar en el botón inferior para ver una demo:

Ejemplo de Formulario

Fuentes

Cómo cambiar el tamaño y apariencia del input: http://stackoverflow.com/questions/9153354/how-to-change-input-file-button-size
Agrupar iconos de FA: http://fontawesome.io/examples/#stacked
Animaciones pulsantes: http://cssdeck.com/labs/simple-css3-heart-pulsing-animations

Comparte si te ha gustado

Autor:
Última actualización:

2 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

De acuerdo con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016, consiento que mis datos sean tratados bajo la responsabilidad de Oscar Gascón Arjol para recibir respuesta a consultas. publicación de comentarios del blog y que las conserve mientras haya un interés mutuo para ello. Me doy por informado que tengo derecho a revocar este consentimiento en cualquier momento y a ejercer los de acceso, rectificación, portabilidad y supresión de mis datos y los de limitación y oposición al tratamiento dirigiéndome por email a me@oscargascon.es. También estoy informado de que puedo reclamar ante la autoridad de control a www.agpd.es.