Ajax Loader
×

Custom form file type with CSS and pulsating effect

This is a simple customized tag of type="file" using CSS3 and animation keyframing. I'm using bootstrap CSS for simple form style and FontAwesome for the icons.

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="es">
3
<head>
4
    <title>Título</title>
5
    <meta charset="UTF-8" />
6
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
7
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
8
</head>
9
<body>
10
    <form role="form">
11
        <div class="form-group">
12
            <label for="name">Nombre</label>
13
            <input type="text" class="form-control" id="name" />
14
            <label for="apellidos">Apellidos</label>
15
            <input type="text" class="form-control" id="apellidos" />
16
        </div>
17
        <label for="photo">Incluya una foto</label>
18
        <div class="drag-drop">
19
            <input type="file" multiple="multiple" id="photo" />
20
            <span class="fa-stack fa-2x">
21
                <i class="fa fa-cloud fa-stack-2x bottom pulsating"></i>
22
                <i class="fa fa-circle fa-stack-1x top medium"></i>
23
                <i class="fa fa-arrow-circle-up fa-stack-1x top"></i>
24
            </span>
25
            <span class="desc">Pulse aquí para añadir archivos</span>
26
        </div>
27
        <button type="submit" class="btn btn-primary">Enviar</button>
28
        <button type="reset" class="btn btn-default">Cancelar</button>
29
    </form>
30
</body>
31
</html>
 
CSS 
        form {
1
        form {
2
            width: 25em;
3
            padding: 1em;
4
            border: 1px solid #ccc;
5
            border-radius: .5em;
6
            margin: 1em;
7
            box-shadow: .25em .25em 0 #ccc;
8
        }
9
 
10
        /* Estilo del área del input[file] */
11
        .drag-drop {
12
            height: 8em;
13
            width: 8em;
14
            background-color: #ccc;
15
            border-radius: 4em;
16
            text-align: center;
17
            color: white;
18
            position: relative;
19
            margin: 0 auto 1em;
20
        }
21
 
22
        .drag-drop span.desc {
23
            display: block;
24
            font-size: .7em;
25
            padding: 0 .5em;
26
            color: #000;
27
        }
28
 
29
        input[type="file"] {
30
                height: 10em;
31
                opacity: 0;
32
                position: absolute;
33
                top: 0;
34
                left: 0;
35
                width: 100%;
36
                z-index: 3;
37
        }
38
 
39
        /* Estilo del área del input[file] con :hover */
40
 
41
        .drag-drop:hover, input[type="file"]:hover {
42
            background-color: #3276b1;
43
            cursor: pointer;
44
        }
45
 
46
        .drag-drop:hover span.desc {
47
            color: #fff;
48
        }
49
 
50
        .drag-drop:hover .pulsating {
51
            animation: pulse1 1s linear infinite;
52
            animation-direction: alternate ;
53
            -webkit-animation: pulse1 1s linear infinite;
54
            -webkit-animation-direction: alternate ;
55
        }
56
 
57
        /* Composición del icono de Upload con FontAwesome */
58
        .fa-stack { margin-top: .5em; }
59
 
60
        .fa-stack .top { color: white; }
61
 
62
        .fa-stack .medium {
63
            color: black;
64
            text-shadow: 0 0 .25em #666;
65
        }
66
 
67
        .fa-stack .bottom { color: rgba(225, 225, 225, .75); }
68
 
69
        /* Keyframing de la animación */
70
 
71
        @keyframes pulse1 {
72
         0% { color: rgba(225, 225, 225, .75); }
73
         50% { color: rgba(225, 225, 225, 0.25); }
74
         100% { color: rgba(225, 225, 225, .75); }
75
        }
76
 
77
        @-moz-keyframes pulse1 {
78
         0% { color: rgba(225, 225, 225, .75); }
79
         50% { color: rgba(225, 225, 225, 0.25); }
80
         100% { color: rgba(225, 225, 225, .75); }
81
        }
82
 
83
        @-webkit-keyframes pulse1 {
84
         0% { color: rgba(225, 225, 225, .75); }
85
         50% { color: rgba(225, 225, 225, 0.25); }
86
         100% { color: rgba(225, 225, 225, .75); }
87
        }
88
 
89
        @-ms-keyframes pulse1 {
90
         0% { color: rgba(225, 225, 225, .75); }
91
         50% { color: rgba(225, 225, 225, 0.25); }
92
         100% { color: rgba(225, 225, 225, .75); }
93
        }
 

Custom form file type with CSS and pulsating effect

CSSDeck G+