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.
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:
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
Autor:
Última actualización:
Un recurso muy útil y practico, siempre viene bien ahorrarse la mayor cantidad de javascript posible. Muchas gracias por compartir lo con todos nosotros. 🙂
Gracias a tí. 😉