Spanish (Español) translation by steven (you can also view the original English article)
Hoy vamos a codificar el elegante formulario de inicio de sesión de Orman Clark utilizando CSS3 y HTML5, además de algunas de las animaciones CSS de Dan Eden para embellecer la experiencia.
Este tutorial asume que tienes cierto conocimiento de HTML/CSS; vamos a movernos bastante rápido. ¡Hagámoslo!
Paso 1: El marcado HTML
Comenzamos vinculando a nuestras hojas de estilo dentro del encabezado de nuestro documento. Tenemos una hoja de estilo de reinicio para que todo vuelva a cero, el animate.css de Dan Eden que usaremos para una animación divertida más adelante, y nuestro propio styles.css donde llevaremos la mayor parte de nuestro trabajo.
1 |
<!doctype html>
|
2 |
|
3 |
<head>
|
4 |
|
5 |
<!-- Basics -->
|
6 |
|
7 |
<meta charset="utf-8"> |
8 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
9 |
|
10 |
<title>Login</title> |
11 |
|
12 |
<!-- CSS -->
|
13 |
|
14 |
<link rel="stylesheet" href="css/reset.css"> |
15 |
<link rel="stylesheet" href="css/animate.css"> |
16 |
<link rel="stylesheet" href="css/styles.css"> |
17 |
|
18 |
</head>
|
La carne del HTML comprende un contenedor, un formulario y algunas entradas.
1 |
<!-- Main HTML -->
|
2 |
|
3 |
<body>
|
4 |
|
5 |
<!-- Begin Page Content -->
|
6 |
|
7 |
<div id="container"> |
8 |
|
9 |
<form>
|
10 |
|
11 |
<label for="username">Username:</label> |
12 |
|
13 |
<input type="text" id="username" name="username"> |
14 |
|
15 |
<label for="password">Password:</label> |
16 |
|
17 |
<p><a href="#">Forgot your password?</a></p> |
18 |
|
19 |
<input type="password" id="password" name="password"> |
20 |
|
21 |
<div id="lower"> |
22 |
|
23 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
24 |
|
25 |
<input type="submit" value="Login"> |
26 |
|
27 |
</div><!--/ lower--> |
28 |
|
29 |
</form>
|
30 |
|
31 |
</div><!--/ container--> |
32 |
|
33 |
|
34 |
<!-- End Page Content -->
|
35 |
|
36 |
</body>
|
37 |
|
38 |
</html>
|
Paso 3: Posicionando los elementos
Ahora que hemos escrito nuestro marcado HTML, podemos pasar al CSS. Primero especificaremos lo básico, colocando nuestro elemento contenedor en el centro de la página.
1 |
/* Basics */
|
2 |
|
3 |
html, body { |
4 |
width: 100%; |
5 |
height: 100%; |
6 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
7 |
color: #444; |
8 |
-webkit-font-smoothing: antialiased; |
9 |
background: #f0f0f0; |
10 |
|
11 |
}
|
12 |
|
13 |
#container { |
14 |
position: fixed; |
15 |
width: 340px; |
16 |
height: 280px; |
17 |
top: 50%; |
18 |
left: 50%; |
19 |
margin-top: -140px; |
20 |
margin-left: -170px; |
21 |
}
|
Ahora agregaremos un estilo estructural a las entradas y otros elementos:
1 |
form { |
2 |
margin: 0 auto; |
3 |
margin-top: 20px; |
4 |
}
|
5 |
|
6 |
label { |
7 |
color: #555; |
8 |
display: inline-block; |
9 |
margin-left: 18px; |
10 |
padding-top: 10px; |
11 |
font-size: 14px; |
12 |
}
|
13 |
|
14 |
p a { |
15 |
font-size: 11px; |
16 |
color: #aaa; |
17 |
float: right; |
18 |
margin-top: -13px; |
19 |
margin-right: 20px; |
20 |
}
|
21 |
|
22 |
p a:hover { |
23 |
color: #555; |
24 |
}
|
25 |
|
26 |
input { |
27 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
28 |
font-size: 12px; |
29 |
outline: none; |
30 |
}
|
31 |
|
32 |
input[type=text], |
33 |
input[type=password] { |
34 |
color: #777; |
35 |
padding-left: 10px; |
36 |
margin: 10px; |
37 |
margin-top: 12px; |
38 |
margin-left: 18px; |
39 |
width: 290px; |
40 |
height: 35px; |
41 |
}
|
42 |
|
43 |
#lower { |
44 |
background: #ecf2f5; |
45 |
width: 100%; |
46 |
height: 69px; |
47 |
margin-top: 20px; |
48 |
}
|
49 |
|
50 |
input[type=checkbox] { |
51 |
margin-left: 20px; |
52 |
margin-top: 30px; |
53 |
}
|
54 |
|
55 |
.check { |
56 |
margin-left: 3px; |
57 |
}
|
58 |
|
59 |
input[type=submit] { |
60 |
float: right; |
61 |
margin-right: 20px; |
62 |
margin-top: 20px; |
63 |
width: 80px; |
64 |
height: 30px; |
65 |
}
|
Paso 4: Aplicar estilos a los elementos
Los elementos están perfectamente posicionados. ¡Ahora es el momento de hacerlos lucir hermosos! Primero, diseñaremos el contenedor dándole esquinas sutilmente redondeadas y una sombra de caja para darle profundidad.
1 |
#container { |
2 |
position: fixed; |
3 |
width: 340px; |
4 |
height: 280px; |
5 |
top: 50%; |
6 |
left: 50%; |
7 |
margin-top: -140px; |
8 |
margin-left: -170px; |
9 |
background: #fff; |
10 |
border-radius: 3px; |
11 |
border: 1px solid #ccc; |
12 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
13 |
}
|
Luego, los 'inputs' reciben un tratamiento similar, con algunos bordes redondeados (border-radius) y sombras de caja. Le daremos al botón de envío un fondo degradado, con un background-color sólido para que se adapte a IE9 y versiones anteriores. Observa que estamos apuntando a cada input individualmente con selectores de atributos CSS.
1 |
form { |
2 |
margin: 0 auto; |
3 |
margin-top: 20px; |
4 |
}
|
5 |
|
6 |
label { |
7 |
color: #555; |
8 |
display: inline-block; |
9 |
margin-left: 18px; |
10 |
padding-top: 10px; |
11 |
font-size: 14px; |
12 |
}
|
13 |
|
14 |
p a { |
15 |
font-size: 11px; |
16 |
color: #aaa; |
17 |
float: right; |
18 |
margin-top: -13px; |
19 |
margin-right: 20px; |
20 |
}
|
21 |
|
22 |
p a:hover { |
23 |
color: #555; |
24 |
}
|
25 |
|
26 |
input { |
27 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
28 |
font-size: 12px; |
29 |
outline: none; |
30 |
}
|
31 |
|
32 |
input[type=text], |
33 |
input[type=password] { |
34 |
color: #777; |
35 |
padding-left: 10px; |
36 |
margin: 10px; |
37 |
margin-top: 12px; |
38 |
margin-left: 18px; |
39 |
width: 290px; |
40 |
height: 35px; |
41 |
border: 1px solid #c7d0d2; |
42 |
border-radius: 2px; |
43 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
44 |
}
|
45 |
|
46 |
#lower { |
47 |
background: #ecf2f5; |
48 |
width: 100%; |
49 |
height: 69px; |
50 |
margin-top: 20px; |
51 |
box-shadow: inset 0 1px 1px #fff; |
52 |
border-top: 1px solid #ccc; |
53 |
border-bottom-right-radius: 3px; |
54 |
border-bottom-left-radius: 3px; |
55 |
}
|
56 |
|
57 |
input[type=checkbox] { |
58 |
margin-left: 20px; |
59 |
margin-top: 30px; |
60 |
}
|
61 |
|
62 |
.check { |
63 |
margin-left: 3px; |
64 |
font-size: 11px; |
65 |
color: #444; |
66 |
text-shadow: 0 1px 0 #fff; |
67 |
}
|
68 |
|
69 |
input[type=submit] { |
70 |
float: right; |
71 |
margin-right: 20px; |
72 |
margin-top: 20px; |
73 |
width: 80px; |
74 |
height: 30px; |
75 |
font-size: 14px; |
76 |
font-weight: bold; |
77 |
color: #fff; |
78 |
background-color: #acd6ef; /*IE fallback*/ |
79 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
80 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
81 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
82 |
border-radius: 30px; |
83 |
border: 1px solid #66add6; |
84 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
85 |
cursor: pointer; |
86 |
}
|
A continuación, para ayudar a los comentarios de los usuarios, nos vendría bien algunos estados activos (active) y de desplazamiento (hover):
1 |
form { |
2 |
margin: 0 auto; |
3 |
margin-top: 20px; |
4 |
}
|
5 |
|
6 |
label { |
7 |
color: #555; |
8 |
display: inline-block; |
9 |
margin-left: 18px; |
10 |
padding-top: 10px; |
11 |
font-size: 14px; |
12 |
}
|
13 |
|
14 |
p a { |
15 |
font-size: 11px; |
16 |
color: #aaa; |
17 |
float: right; |
18 |
margin-top: -13px; |
19 |
margin-right: 20px; |
20 |
-webkit-transition: all .4s ease; |
21 |
-moz-transition: all .4s ease; |
22 |
transition: all .4s ease; |
23 |
}
|
24 |
|
25 |
p a:hover { |
26 |
color: #555; |
27 |
}
|
28 |
|
29 |
input { |
30 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
31 |
font-size: 12px; |
32 |
outline: none; |
33 |
}
|
34 |
|
35 |
input[type=text], |
36 |
input[type=password] { |
37 |
color: #777; |
38 |
padding-left: 10px; |
39 |
margin: 10px; |
40 |
margin-top: 12px; |
41 |
margin-left: 18px; |
42 |
width: 290px; |
43 |
height: 35px; |
44 |
border: 1px solid #c7d0d2; |
45 |
border-radius: 2px; |
46 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
47 |
-webkit-transition: all .4s ease; |
48 |
-moz-transition: all .4s ease; |
49 |
transition: all .4s ease; |
50 |
}
|
51 |
|
52 |
input[type=text]:hover, |
53 |
input[type=password]:hover { |
54 |
border: 1px solid #b6bfc0; |
55 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
56 |
}
|
57 |
|
58 |
input[type=text]:focus, |
59 |
input[type=password]:focus { |
60 |
border: 1px solid #a8c9e4; |
61 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
62 |
}
|
63 |
|
64 |
#lower { |
65 |
background: #ecf2f5; |
66 |
width: 100%; |
67 |
height: 69px; |
68 |
margin-top: 20px; |
69 |
box-shadow: inset 0 1px 1px #fff; |
70 |
border-top: 1px solid #ccc; |
71 |
border-bottom-right-radius: 3px; |
72 |
border-bottom-left-radius: 3px; |
73 |
}
|
74 |
|
75 |
input[type=checkbox] { |
76 |
margin-left: 20px; |
77 |
margin-top: 30px; |
78 |
}
|
79 |
|
80 |
.check { |
81 |
margin-left: 3px; |
82 |
font-size: 11px; |
83 |
color: #444; |
84 |
text-shadow: 0 1px 0 #fff; |
85 |
}
|
86 |
|
87 |
input[type=submit] { |
88 |
float: right; |
89 |
margin-right: 20px; |
90 |
margin-top: 20px; |
91 |
width: 80px; |
92 |
height: 30px; |
93 |
font-size: 14px; |
94 |
font-weight: bold; |
95 |
color: #fff; |
96 |
background-color: #acd6ef; /*IE fallback*/ |
97 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
98 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
99 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
100 |
border-radius: 30px; |
101 |
border: 1px solid #66add6; |
102 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
103 |
cursor: pointer; |
104 |
}
|
105 |
|
106 |
input[type=submit]:hover { |
107 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
108 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
109 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
110 |
}
|
111 |
|
112 |
input[type=submit]:active { |
113 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
114 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
115 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
116 |
}
|
Paso 5: Toques finales
Nuestro formulario de inicio de sesión se ve bien, pero empujemos el barco y agreguemos a la experiencia. Ahora vamos a agregar algunas animaciones CSS y transiciones para pulirlo. Ya hemos hecho referencia al animate.css de Dan Eden en nuestra cabecera; ahora podemos hacer uso de sus tipos de animación predefinidos, como bounceIn, junto con los prefijos de navegador adecuados.
Primero, la animación del contenedor:
1 |
#container { |
2 |
position: fixed; |
3 |
width: 340px; |
4 |
height: 280px; |
5 |
top: 50%; |
6 |
left: 50%; |
7 |
margin-top: -140px; |
8 |
margin-left: -170px; |
9 |
background: #fff; |
10 |
border-radius: 3px; |
11 |
border: 1px solid #ccc; |
12 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
13 |
-webkit-animation-name: bounceIn; |
14 |
-webkit-animation-fill-mode: both; |
15 |
-webkit-animation-duration: 1s; |
16 |
-webkit-animation-iteration-count: 1; |
17 |
-webkit-animation-timing-function: linear; |
18 |
-moz-animation-name: bounceIn; |
19 |
-moz-animation-fill-mode: both; |
20 |
-moz-animation-duration: 1s; |
21 |
-moz-animation-iteration-count: 1; |
22 |
-moz-animation-timing-function: linear; |
23 |
animation-name: bounceIn; |
24 |
animation-fill-mode: both; |
25 |
animation-duration: 1s; |
26 |
animation-iteration-count: 1; |
27 |
animation-timing-function: linear; |
28 |
}
|
A continuación, transiciones para los elementos interactivos:
1 |
p a { |
2 |
font-size: 11px; |
3 |
color: #aaa; |
4 |
float: right; |
5 |
margin-top: -13px; |
6 |
margin-right: 20px; |
7 |
-webkit-transition: all .4s ease; |
8 |
-moz-transition: all .4s ease; |
9 |
transition: all .4s ease; |
10 |
}
|
11 |
|
12 |
input[type=text], |
13 |
input[type=password] { |
14 |
color: #777; |
15 |
padding-left: 10px; |
16 |
margin: 10px; |
17 |
margin-top: 12px; |
18 |
margin-left: 18px; |
19 |
width: 290px; |
20 |
height: 35px; |
21 |
border: 1px solid #c7d0d2; |
22 |
border-radius: 2px; |
23 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
24 |
-webkit-transition: all .4s ease; |
25 |
-moz-transition: all .4s ease; |
26 |
transition: all .4s ease; |
27 |
}
|
Paso 6: Código final
¡Terminamos! A continuación, encontrarás el código final para nuestro formulario de inicio de sesión elegante, que debería proporcionarte algo muy similar a esto:
HTML:
1 |
<!doctype html>
|
2 |
|
3 |
<head>
|
4 |
|
5 |
<!-- Basics -->
|
6 |
|
7 |
<meta charset="utf-8"> |
8 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
9 |
|
10 |
<title>Login</title> |
11 |
|
12 |
<!-- CSS -->
|
13 |
|
14 |
<link rel="stylesheet" href="css/reset.css"> |
15 |
<link rel="stylesheet" href="css/animate.css"> |
16 |
<link rel="stylesheet" href="css/styles.css"> |
17 |
|
18 |
</head>
|
19 |
|
20 |
<!-- Main HTML -->
|
21 |
|
22 |
<body>
|
23 |
|
24 |
<!-- Begin Page Content -->
|
25 |
|
26 |
<div id="container"> |
27 |
|
28 |
<form>
|
29 |
|
30 |
<label for="username">Username:</label> |
31 |
|
32 |
<input type="text" id="username" name="username"> |
33 |
|
34 |
<label for="password">Password:</label> |
35 |
|
36 |
<p><a href="#">Forgot your password?</a></p> |
37 |
|
38 |
<input type="password" id="password" name="password"> |
39 |
|
40 |
<div id="lower"> |
41 |
|
42 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
43 |
|
44 |
<input type="submit" value="Login"> |
45 |
|
46 |
</div><!--/ lower--> |
47 |
|
48 |
</form>
|
49 |
|
50 |
</div><!--/ container--> |
51 |
|
52 |
|
53 |
|
54 |
<!-- End Page Content -->
|
55 |
|
56 |
</body>
|
57 |
|
58 |
</html>
|
CSS:
1 |
|
2 |
/* Basics */
|
3 |
|
4 |
html, body { |
5 |
width: 100%; |
6 |
height: 100%; |
7 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
8 |
color: #444; |
9 |
-webkit-font-smoothing: antialiased; |
10 |
background: #f0f0f0; |
11 |
|
12 |
}
|
13 |
|
14 |
#container { |
15 |
position: fixed; |
16 |
width: 340px; |
17 |
height: 280px; |
18 |
top: 50%; |
19 |
left: 50%; |
20 |
margin-top: -140px; |
21 |
margin-left: -170px; |
22 |
background: #fff; |
23 |
border-radius: 3px; |
24 |
border: 1px solid #ccc; |
25 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
26 |
-webkit-animation-name: bounceIn; |
27 |
-webkit-animation-fill-mode: both; |
28 |
-webkit-animation-duration: 1s; |
29 |
-webkit-animation-iteration-count: 1; |
30 |
-webkit-animation-timing-function: linear; |
31 |
-moz-animation-name: bounceIn; |
32 |
-moz-animation-fill-mode: both; |
33 |
-moz-animation-duration: 1s; |
34 |
-moz-animation-iteration-count: 1; |
35 |
-moz-animation-timing-function: linear; |
36 |
animation-name: bounceIn; |
37 |
animation-fill-mode: both; |
38 |
animation-duration: 1s; |
39 |
animation-iteration-count: 1; |
40 |
animation-timing-function: linear; |
41 |
}
|
42 |
|
43 |
form { |
44 |
margin: 0 auto; |
45 |
margin-top: 20px; |
46 |
}
|
47 |
|
48 |
label { |
49 |
color: #555; |
50 |
display: inline-block; |
51 |
margin-left: 18px; |
52 |
padding-top: 10px; |
53 |
font-size: 14px; |
54 |
}
|
55 |
|
56 |
p a { |
57 |
font-size: 11px; |
58 |
color: #aaa; |
59 |
float: right; |
60 |
margin-top: -13px; |
61 |
margin-right: 20px; |
62 |
-webkit-transition: all .4s ease; |
63 |
-moz-transition: all .4s ease; |
64 |
transition: all .4s ease; |
65 |
}
|
66 |
|
67 |
p a:hover { |
68 |
color: #555; |
69 |
}
|
70 |
|
71 |
input { |
72 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
73 |
font-size: 12px; |
74 |
outline: none; |
75 |
}
|
76 |
|
77 |
input[type=text], |
78 |
input[type=password] { |
79 |
color: #777; |
80 |
padding-left: 10px; |
81 |
margin: 10px; |
82 |
margin-top: 12px; |
83 |
margin-left: 18px; |
84 |
width: 290px; |
85 |
height: 35px; |
86 |
border: 1px solid #c7d0d2; |
87 |
border-radius: 2px; |
88 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
89 |
-webkit-transition: all .4s ease; |
90 |
-moz-transition: all .4s ease; |
91 |
transition: all .4s ease; |
92 |
}
|
93 |
|
94 |
input[type=text]:hover, |
95 |
input[type=password]:hover { |
96 |
border: 1px solid #b6bfc0; |
97 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
98 |
}
|
99 |
|
100 |
input[type=text]:focus, |
101 |
input[type=password]:focus { |
102 |
border: 1px solid #a8c9e4; |
103 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
104 |
}
|
105 |
|
106 |
#lower { |
107 |
background: #ecf2f5; |
108 |
width: 100%; |
109 |
height: 69px; |
110 |
margin-top: 20px; |
111 |
box-shadow: inset 0 1px 1px #fff; |
112 |
border-top: 1px solid #ccc; |
113 |
border-bottom-right-radius: 3px; |
114 |
border-bottom-left-radius: 3px; |
115 |
}
|
116 |
|
117 |
input[type=checkbox] { |
118 |
margin-left: 20px; |
119 |
margin-top: 30px; |
120 |
}
|
121 |
|
122 |
.check { |
123 |
margin-left: 3px; |
124 |
font-size: 11px; |
125 |
color: #444; |
126 |
text-shadow: 0 1px 0 #fff; |
127 |
}
|
128 |
|
129 |
input[type=submit] { |
130 |
float: right; |
131 |
margin-right: 20px; |
132 |
margin-top: 20px; |
133 |
width: 80px; |
134 |
height: 30px; |
135 |
font-size: 14px; |
136 |
font-weight: bold; |
137 |
color: #fff; |
138 |
background-color: #acd6ef; /*IE fallback*/ |
139 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
140 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
141 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
142 |
border-radius: 30px; |
143 |
border: 1px solid #66add6; |
144 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
145 |
cursor: pointer; |
146 |
}
|
147 |
|
148 |
input[type=submit]:hover { |
149 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
150 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
151 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
152 |
}
|
153 |
|
154 |
input[type=submit]:active { |
155 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
156 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
157 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
158 |
}
|
Conclusión
Espero que hayan disfrutado seguir mientras creamos algo que no solo se ve bien, sino que funciona a la perfección y tiene ese pequeño 'algo' adicional. ¡Gracias por leer!
By
