Spanish (Español) translation by Rodney Martinez (you can also view the original English article)
Este tutorial demostrará cómo crear una barra de navegación sencilla, pero estupenda, usando varios estilos CSS3 combinados. Estamos buscando una apariencia que en el pasado solamente podría ser creada al combinar varias imágenes, JavaScript y varios divs. Así que comencemos...
Nota: todos los siguientes ejemplos fueron probados en Mozilla Firefox, Safari y Chrome. Si quiere conseguir algo parecido a IE o cualquier otro navegador, por favor, deje un comentario y estaré contento en poder ayudarle.
Antes de que comencemos.
Una buena apariencia y una barra de navegación bien diseñada ha sido, desde el comienzo del diseño web, uno de los elementos más poderosos para mantener a los sitios web organizados y bien estructurados, las esquinas redondas y los efectos hover requieren una serie de trucos que incrementan el tamaño de nuestro código y el número de imágenes.
Para este tutorial, examinaremos dos efectos CSS3 muy importantes: Esquinas Redondeadas y Sombras de Caja , además, usaremos el degradado lineal que vimos anteriormente en el tutorial: CSS3 versus Photoshop - Fondos Complejos.
Paso 1: Esquinas Redondeadas
Todos han escuchado de ellas, así que sería redundante hablar de cómo crearlas, así que en el siguiente ejemplo me enfocaré en las diferencias de crear el efecto Esquinas Redondeadas usando imágenes y las ventajas y desventajas de hacerlo con CSS3.
Crear un efecto de esquina redondeada es muy sencillo en cualquier software gráfico, pero en Photoshop tenemos algunos problemas:
Precisión: Incluso si usted puede establecer el radio de la esquina redondeada, el motor integrado anti-alisado de Photoshop a menudo añade uno o dos pixeles extra en el gráfico. La mayoría de nosotros en el pasado tuvo que reducir manualmente los pixeles de una imagen inexacta basada en esquinas redondeadas para crear una unión nítida con, por ejemplo, fondos de color.
Edición: Esto es uno de los problemas más grandes de crear imágenes basadas en esquinas redondeadas. Si usted crea un gráfico para un radio de 10px en Photoshop para redondear y, por alguna razón, usted necesita incrementar el radio a 20px, no hay otra forma de hacer esto que dibujando la forma, o editando de forma manual todas sus esquinas, perdiendo tiempo y precisión. Cambiar el tamaño es otro problema, si usted quiere estirar o aumentar la forma, entonces debe usar la Herramienta de Selección de Punto de Photoshop, ya que si usa los Controles de Transformación, puede ocasionar una distorsión no deseada en la esquina de la forma. Y no necesito mencionar que recortar las esquinas un montón de valiosos minutos.
Rellenos y Bordes: Crear un relleno de degradado dentro de una imagen mediante una caja de esquinas redondeadas, siempre ha sido una tarea grande, incluso, sin considerar los bordes, la precisión quírurjica Otro problema con el relleno de imagen que a menudo el contenedor tiene que aumentar su altura o anchura, por lo que se obtiene un efecto no deseado con el degradado (vea la siguiente captura de pantalla).
Estilos de Esquinas Variados: En Photoshop, crear estilos de esquinas toma su poco de tiempo, ya que no hay opciones para combinar estilos de esquinas. Usted debe reducir o aumentar de forma manual el radio o combinar las formas… y luego cortar cada esquina.
Ahora en CSS3
Usando CSS3 para reemplazar la clásica esquinas redondeadas basadas en imágenes es una excelente idea. Aquí están algunas de las ventajas:
- Reduce el número de imágenes y solicitudes HTTP al servidor.
- Funciona en todos los navegadores modernos (excepto Internet Explorer versión 6, 7 y 8) incluyendo la mayoría de los navegadores más populares para teléfonos.
- Solamente necesita algunas lineas en el archivo CSS para hacerlo funcionar.
- Aumentar/Reducir el radio, cambiar el tamaño, cambiar el relleno y los bordes solamente toma algunos segundos, pero en Photoshop le tomará varios minutos.
Veamos el código para crear esquinas redondeadas en un elemento HTML:
1 |
/*Rounded Corner Boxes*/
|
2 |
.box{ |
3 |
background-image:-moz-linear-gradient(top, #FAD502, #E89502); |
4 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502)); |
5 |
}
|
6 |
|
7 |
.fourcorners{ |
8 |
-moz-border-radius: 20px; |
9 |
-webkit-border-radius: 20px; |
10 |
-khtml-border-radius: 20px; |
11 |
border-radius: 20px; |
12 |
}
|
13 |
|
14 |
.topleft{ |
15 |
-moz-border-radius-topleft: 20px; |
16 |
-webkit-border-top-left-radius: 20px; |
17 |
-khtml-border-radius-topleft: 20px; |
18 |
border-top-left-radius: 20px; |
19 |
}
|
20 |
|
21 |
.bottomleft{ |
22 |
-moz-border-radius-bottomleft: 20px; |
23 |
-webkit-border-bottom-left-radius: 20px; |
24 |
-khtml-border-radius-bottomleft: 20px; |
25 |
border-bottom-left-radius: 20px; |
26 |
}
|
27 |
|
28 |
.topright{ |
29 |
-moz-border-radius-topright: 20px; |
30 |
-webkit-border-top-right-radius: 20px; |
31 |
-khtml-border-radius-topright: 20px; |
32 |
border-top-right-radius: 20px; |
33 |
}
|
34 |
|
35 |
.bottomright{ |
36 |
-moz-border-radius-bottomright: 20px; |
37 |
-webkit-border-bottom-right-radius: 20px; |
38 |
-khtml-border-radius-bottomright: 20px; |
39 |
border-bottom-right-radius: 20px; |
40 |
}
|
41 |
|
42 |
.asymmetrical1{ |
43 |
-webkit-border-top-left-radius: 160px; |
44 |
-khtml-border-radius-topleft: 160px; |
45 |
-moz-border-radius-topleft: 160px; |
46 |
border-top-left-radius: 160px; |
47 |
|
48 |
-webkit-border-top-right-radius: 20px; |
49 |
-khtml-border-radius-topright: 20px; |
50 |
-moz-border-radius-topright: 20px; |
51 |
border-top-right-radius: 20px; |
52 |
|
53 |
-webkit-border-bottom-left-radius: 10px; |
54 |
-khtml-border-radius-bottomleft: 10px; |
55 |
-moz-border-radius-bottomleft: 10px; |
56 |
border-bottom-left-radius: 10px; |
57 |
|
58 |
-webkit-border-bottom-right-radius: 0px; |
59 |
-khtml-border-radius-bottomright: 0px; |
60 |
-moz-border-radius-bottomright: 0px; |
61 |
border-bottom-right-radius: 0px; |
62 |
}
|
63 |
|
64 |
.asymmetrical2{ |
65 |
-webkit-border-top-left-radius: 0px; |
66 |
-khtml-border-radius-topleft: 0px; |
67 |
-moz-border-radius-topleft: 0px; |
68 |
border-top-left-radius: 0px; |
69 |
|
70 |
-webkit-border-top-right-radius: 90px; |
71 |
-khtml-border-radius-topright: 90px; |
72 |
-moz-border-radius-topright: 90px; |
73 |
border-top-right-radius: 90px; |
74 |
|
75 |
-webkit-border-bottom-left-radius: 0px; |
76 |
-khtml-border-radius-bottomleft: 0px; |
77 |
-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; |
78 |
|
79 |
-webkit-border-bottom-right-radius: 90px; |
80 |
-khtml-border-radius-bottomright: 90px; |
81 |
-moz-border-radius-bottomright: 90px; |
82 |
border-bottom-right-radius: 90px; |
83 |
}
|
84 |
|
85 |
.circle{ |
86 |
width:170px; |
87 |
height:170px; |
88 |
|
89 |
padding:15px; |
90 |
font-family:Arial, Helvetica, sans-serif; |
91 |
color:#FFF; |
92 |
font-size:12px; |
93 |
font-weight:bold; |
94 |
float:left; |
95 |
|
96 |
background-image:-moz-linear-gradient(top, #FAD502, #E89502); |
97 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAD502), to(#E89502), color-stop(1,#E89502)); |
98 |
|
99 |
|
100 |
-webkit-border-top-left-radius: 100px; |
101 |
-khtml-border-radius-topleft: 100px; |
102 |
-moz-border-radius-topleft: 100px; |
103 |
border-top-left-radius: 100px; |
104 |
|
105 |
-webkit-border-top-right-radius: 100px; |
106 |
-khtml-border-radius-topright: 100px; |
107 |
-moz-border-radius-topright: 100px; |
108 |
border-top-right-radius: 100px; |
109 |
|
110 |
-webkit-border-bottom-left-radius: 100px; |
111 |
-khtml-border-radius-bottomleft: 100px; |
112 |
-moz-border-radius-bottomleft: 100px; |
113 |
border-bottom-left-radius: 100px; |
114 |
|
115 |
-webkit-border-bottom-right-radius: 100px; |
116 |
-khtml-border-radius-bottomright: 100px; |
117 |
-moz-border-radius-bottomright: 100px; |
118 |
border-bottom-right-radius: 100px; |
119 |
}
|
Ver el Demo
Paso : Box Shadows
Algunos de los mejores efectos que puede conseguir con Photoshop son a través de las opciones Drop Shadow e Inner Shadow. Usándolas de forma adecuada se puede lograr un resultado sorprendente de efectos 3D. Por supuesto, si se usan de forma equivocada pueden convertirse fácilmente en un efecto cursi.
Debajo encontrará un par de ejemplo de buenas prácticas:
Ahora en CSS3
CSS3 nos permite crear sombras, solamente con un par de lineas de código, el estilo a cargo "box-shadow".
Para crear un efecto Drop Shadow como el de Photoshop, puede usar la siguiente sintaxis:
box-shadow: <xpos> <ypos> <size> <color> ;
Para crear un efecto Inner Shadow como el de Photoshop, puede usar la siguiente sintaxis:
box-shadow: inset <style> <xpos> <ypos> <size> <color> ;
Ahora, éste es el código para crear distintas variantes de Box Shadows:
1 |
/*Box shadows*/
|
2 |
.dropshadow{ |
3 |
background-image:-moz-linear-gradient(top, #F3F4F5, #C8C9CA); |
4 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F3F4F5), to(#C8C9CA), color-stop(1,#C8C9CA)); |
5 |
|
6 |
border:2px solid #F2F2F2; |
7 |
|
8 |
box-shadow: 10px 10px 10px rgba(0,0,0,0.25); |
9 |
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.25); |
10 |
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.25); |
11 |
}
|
12 |
|
13 |
.innershadow{ |
14 |
background-image:-moz-linear-gradient(top, #E2E2E2, #CCCCCC); |
15 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E2E2E2), to(#CCCCCC), color-stop(1,#CCCCCC)); |
16 |
|
17 |
border:2px solid #FEFEFE; |
18 |
|
19 |
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25); |
20 |
-moz-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25); |
21 |
-webkit-box-shadow: inset 5px 5px 5px rgba(0,0,0,0.25); |
22 |
}
|
23 |
|
24 |
.intenseshadow{ |
25 |
background-color:#FFF; |
26 |
border:1px solid #F00; |
27 |
|
28 |
box-shadow: 10px 10px 0px #F00; |
29 |
-moz-box-shadow: 10px 10px 0px #F00; |
30 |
-webkit-box-shadow: 10px 10px 0px #F00; |
31 |
}
|
32 |
|
33 |
.bevel{ |
34 |
background-color:#CCC; |
35 |
|
36 |
box-shadow: 10px 10px 0px #F00; |
37 |
-moz-box-shadow:inset 0px 0px 120px rgba(0,0,0,.60); |
38 |
-webkit-box-shadow: 10px 10px 0px #F00; |
39 |
}
|
Ver Demo
Paso 3: Menú de la Navegación
Vamos a combinar esquinas redondeadas, rellenos de degradados y sombras de cajas para crear los menús para la navegación. Siempre puede empezar con Photoshop para crear los gráficos, consiga descargar los archivos fuentes de la parte superior de la página si desea empezar justo ahí.
La parte divertida de esto es tratar de conseguir el mismo resultado con CSS3, ¡aquí vamos!
Primero, la definición del contenido por medio de las etiquetas HTML (así es, estoy usando la etiqueta "nav" de HTML5, porque es muy atractiva y semánticamente adecuada, pero en su lugar usted puede usar una etiqueta div).
1 |
<nav class="horizontal"> |
2 |
<ul>
|
3 |
<li><a href="#">Lorem Ipsum</a></li> |
4 |
<li><a href="#">Dolor Sit Amet</a></li> |
5 |
<li><a href="#">Sed do Eiusmod</a></li> |
6 |
<li><a href="#">Consectetur Adipisicing</a></li> |
7 |
<li><a href="#">Lipsum amet</a></li> |
8 |
<li><a href="#">Lorem Ipsum</a></li> |
9 |
</ul>
|
10 |
</nav>
|
Paso 4: CSS
Ahora, empecemos con el CSS. Primero ajuste las posiciones y la altura.
1 |
/*Sample Navigation Bar*/
|
2 |
nav.horizontal{ |
3 |
}
|
4 |
|
5 |
nav.horizontal h3{ |
6 |
padding-bottom:20px; |
7 |
}
|
8 |
|
9 |
nav.horizontal ul{ |
10 |
height:50px; |
11 |
}
|
12 |
|
13 |
nav.horizontal ul li{ |
14 |
list-style:none; |
15 |
display:inline; |
16 |
float:left; |
17 |
}
|
18 |
|
19 |
nav.horizontal ul li a{ |
20 |
display:block; |
21 |
height:28px; |
22 |
margin:2px 6px 2px 6px; |
23 |
padding:15px 20px 0px 20px; |
24 |
}
|
25 |
|
26 |
nav.horizontal ul li a:hover{ |
27 |
}
|
Luego añada la opción de relleno Gradient Fills:
1 |
nav.horizontal{ |
2 |
}
|
3 |
|
4 |
nav.horizontal h3{ |
5 |
padding-bottom:20px; |
6 |
}
|
7 |
|
8 |
nav.horizontal ul{ |
9 |
height:50px; |
10 |
|
11 |
background-image:-moz-linear-gradient(top, #93C204, #608009); |
12 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009)); |
13 |
|
14 |
border:1px solid #608009; |
15 |
}
|
16 |
|
17 |
nav.horizontal ul li{ |
18 |
list-style:none; |
19 |
display:inline; |
20 |
float:left; |
21 |
}
|
22 |
|
23 |
nav.horizontal ul li a{ |
24 |
display:block; |
25 |
height:28px; |
26 |
margin:2px 6px 2px 6px; |
27 |
padding:15px 20px 0px 20px; |
28 |
|
29 |
font-size:12px; |
30 |
font-weight:bold; |
31 |
color:#FFF; |
32 |
text-transform:uppercase; |
33 |
text-decoration:none; |
34 |
|
35 |
border:1px solid transparent; |
36 |
background-image:none; |
37 |
}
|
38 |
|
39 |
nav.horizontal ul li a:hover{ |
40 |
background-image:-moz-linear-gradient(top, #161616, #2B3615); |
41 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615)); |
42 |
|
43 |
border:1px solid #A3D804; |
44 |
}
|
Después la opción para redondear las esquinas; Rounded Corners:
1 |
nav.horizontal{ |
2 |
}
|
3 |
|
4 |
nav.horizontal h3{ |
5 |
padding-bottom:20px; |
6 |
}
|
7 |
|
8 |
nav.horizontal ul{ |
9 |
height:50px; |
10 |
|
11 |
background-image:-moz-linear-gradient(top, #93C204, #608009); |
12 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009)); |
13 |
|
14 |
-moz-border-radius: 8px; |
15 |
-webkit-border-radius: 8px; |
16 |
-khtml-border-radius: 8px; |
17 |
border-radius: 8px; |
18 |
|
19 |
border:1px solid #608009; |
20 |
}
|
21 |
|
22 |
nav.horizontal ul li{ |
23 |
list-style:none; |
24 |
display:inline; |
25 |
float:left; |
26 |
}
|
27 |
|
28 |
nav.horizontal ul li a{ |
29 |
display:block; |
30 |
height:28px; |
31 |
margin:2px 6px 2px 6px; |
32 |
padding:15px 20px 0px 20px; |
33 |
|
34 |
font-size:12px; |
35 |
font-weight:bold; |
36 |
color:#FFF; |
37 |
text-transform:uppercase; |
38 |
text-decoration:none; |
39 |
|
40 |
border:1px solid transparent; |
41 |
background-image:none; |
42 |
|
43 |
-moz-border-radius: 10px; |
44 |
-webkit-border-radius: 10px; |
45 |
-khtml-border-radius: 10px; |
46 |
border-radius: 10px; |
47 |
}
|
48 |
|
49 |
nav.horizontal ul li a:hover{ |
50 |
background-image:-moz-linear-gradient(top, #161616, #2B3615); |
51 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615)); |
52 |
|
53 |
-moz-border-radius: 10px; |
54 |
-webkit-border-radius: 10px; |
55 |
-khtml-border-radius: 10px; |
56 |
border-radius: 10px; |
57 |
|
58 |
border:1px solid #A3D804; |
59 |
}
|
Y finalmente, las sombras con la opción Box Shadows:
1 |
nav.horizontal{ |
2 |
}
|
3 |
|
4 |
nav.horizontal h3{ |
5 |
padding-bottom:20px; |
6 |
}
|
7 |
|
8 |
nav.horizontal ul{ |
9 |
height:50px; |
10 |
|
11 |
background-image:-moz-linear-gradient(top, #93C204, #608009); |
12 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009)); |
13 |
|
14 |
-moz-border-radius: 8px; |
15 |
-webkit-border-radius: 8px; |
16 |
-khtml-border-radius: 8px; |
17 |
border-radius: 8px; |
18 |
|
19 |
border:1px solid #608009; |
20 |
|
21 |
box-shadow: 5px 5px 5px rgba(0,0,0,0.25); |
22 |
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25); |
23 |
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25); |
24 |
}
|
25 |
|
26 |
nav.horizontal ul li{ |
27 |
list-style:none; |
28 |
display:inline; |
29 |
float:left; |
30 |
}
|
31 |
|
32 |
nav.horizontal ul li a{ |
33 |
display:block; |
34 |
height:28px; |
35 |
margin:2px 6px 2px 6px; |
36 |
padding:15px 20px 0px 20px; |
37 |
|
38 |
font-size:12px; |
39 |
font-weight:bold; |
40 |
color:#FFF; |
41 |
text-transform:uppercase; |
42 |
text-decoration:none; |
43 |
|
44 |
border:1px solid transparent; |
45 |
background-image:none; |
46 |
|
47 |
-moz-border-radius: 10px; |
48 |
-webkit-border-radius: 10px; |
49 |
-khtml-border-radius: 10px; |
50 |
border-radius: 10px; |
51 |
}
|
52 |
|
53 |
nav.horizontal ul li a:hover{ |
54 |
background-image:-moz-linear-gradient(top, #161616, #2B3615); |
55 |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615)); |
56 |
|
57 |
-moz-border-radius: 10px; |
58 |
-webkit-border-radius: 10px; |
59 |
-khtml-border-radius: 10px; |
60 |
border-radius: 10px; |
61 |
|
62 |
border:1px solid #A3D804; |
63 |
|
64 |
box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25); |
65 |
-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25); |
66 |
-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25); |
67 |
}
|
Ver Demo
Paso 5: Adaptando el Sangrado
Una nota final con respecto a las esquinas redondeadas con un relleno y un borde: utilizan sangrado. Lo observará durante el estado hover de nuestros botones de navegación:
Relleno de color el área de sangrado más allá de los bordes.
Podemos solucionar estos usando la propiedad background-clip, la cual determina si el fondo de un elemento dato se extiende más allá de su borde. De forma predeterminada está (border-box), la cual nos da éste engorroso sangrado, sin embargo, podemos alterarlo por medio de padding-box, el cual detiene por debajo del borde.
Ahora, vamos a añadir el siguiente código CSS a nuestros botones:
1 |
nav.horizontal ul li a{ |
2 |
display:block; |
3 |
height:28px; |
4 |
margin:2px 6px 2px 6px; |
5 |
padding:15px 20px 0px 20px; |
6 |
|
7 |
font-size:12px; |
8 |
font-weight:bold; |
9 |
color:#FFF; |
10 |
text-transform:uppercase; |
11 |
text-decoration:none; |
12 |
|
13 |
border:1px solid transparent; |
14 |
background-image:none; |
15 |
|
16 |
-moz-border-radius: 10px; |
17 |
-webkit-border-radius: 10px; |
18 |
-khtml-border-radius: 10px; |
19 |
border-radius: 10px; |
20 |
|
21 |
-moz-background-clip: padding; |
22 |
-webkit-background-clip: padding-box; |
23 |
background-clip: padding-box; |
24 |
}
|
…lo cual nos da un resultado más parecido a lo que deseamos cuando pasemos el cursor sobre ellos:
Un magnífico relleno de color contenido dentro de los límites de nuestro elemento.
Ver Demo
Usted puede leer más sobre la propiedad background-clip en CSS3 info.
Conclusión
Crear un efecto atractivo para una barra de navegación simple con CSS3 es más fácil y más rápido que nunca, así que ¿por qué no probar con su próximo diseño? ¡Gracias por su lectura!
By
