Hoy vamos a crear un menú de CSS horizontal desde cero. Utilizaremos PNG transparentes (los usuarios del navegador no están actualizados) para crear una barra horizontal brillante, cuyo color se puede cambiar fácilmente utilizando solo CSS Antes de comenzar, echa un vistazo a lo que construiremos en la demostración en vivo.
Creando el PSD
El trabajo de Photoshop para el menú es bastante mínimo y solo debería llevarle unos minutos. Lo he dividido en cinco pasos muy fáciles.
Barra sólida
Cree un nuevo archivo RGB en Photoshop y dibuje una barra de color de 45 píxeles de alto (usé # 4d4e50) en todo el lienzo.
Gradiente
Luego, tome su herramienta de degradado y asegúrese de que esté configurada en un degradado que comience en negro y finalice en transparente. Comenzando en la parte inferior, estira el degradado verticalmente sobre la barra gris.
Brillo
Haz una franja blanca que se alinee con la parte superior de tu barra gris pero que solo se extienda hasta la mitad de la distancia vertical. Establece la opacidad de esta franja al 7%.
Rayas
Haz dos franjas blancas más, esta vez solo unos pocos píxeles de alto y insértalas ligeramente desde la parte superior e inferior de la barra gris.
Ahorro
Lo creas o no, eso es todo lo que necesitamos! Antes de guardar el archivo PNG, desactive la capa de la barra de color original. Esto es para que podamos cambiar el color dentro de nuestro CSS. También tenga en cuenta que no necesitamos la imagen completa, ya que la configuraremos para que se repita horizontalmente. Simplemente corte una pequeña franja vertical y vaya a "¿Guardar para web y dispositivos?" para guardar tu PNG.
El HTML
Asumiré una comprensión básica de HTML y CSS aquí. Trataré de ser lo más descriptivo posible sin explicar todo línea por línea.
El HTML vacío
Comenzaremos con una página HTML simple y en blanco.
Envase
Ahora agregaremos un contenedor div que contendrá el menú de navegación div.
Estructura del menú
Para finalizar nuestro HTML, agregue una lista desordenada que contenga elementos de intervalo para Inicio, Acerca de, Servicios, Trabajo y Contacto. Esta será la base para nuestros elementos de menú. Insertaremos el fondo y el estilo de esta lista todo en CSS.
El CSS
El CSS contendrá la mayor parte del trabajo. Todo lo que hemos hecho hasta ahora es crear una lista de enlaces para que su página se vea así:
Color de fondo
Lo primero que haremos es tintar un poco el fondo para romper el fondo blanco aburrido. Solo agrega el siguiente fragmento al cuerpo.
Diseño básico de contenedores
Para comenzar a diseñar el contenedor, establezca la posición en relativa y la altura de 45 píxeles (que es la altura de nuestro gráfico de Photoshop). Luego, configure el color y el fondo en blanco y el ancho en 100% para que se estire por toda la ventana.
Este código debe resultar en un lío en su vista previa. No se preocupe, ¡así es exactamente como debe verse en este punto!
Añadiendo y peinando la imagen
¡Ahora entraremos en las cosas que harán que se vea como un menú! Esta vez nos dirigiremos a la división navMenu que contiene los enlaces. Una vez más, establezca su posición a relativa y la altura a 45px. No agregaremos ningún texto en esta etapa, pero siga adelante y establezca el tamaño de fuente en 17px. A continuación, establezco el color de fondo y la imagen con una sola línea de código. Observe que el color (# 4d4e50) es el color de nuestra barra de color original en Photoshop. Esta configuración es la clave para la flexibilidad de este menú. Cambiar este valor cambiará el color del menú de navegación, haciendo que sea muy fácil de personalizar. Después de configurar un color, introduzca la imagen de fondo y configúrela para que se repita en el eje x.
Ahora, si obtienes una vista previa de la página, deberías ver una barra de menú brillante y brillante. Experimente cambiando ese valor de color para ver cómo la imagen conserva su brillo mientras cambia los colores.
Direccionando los enlaces
A continuación, agregaremos una gran parte de CSS a la lista desordenada para comenzar a colocar nuestros enlaces en posición. Para la sección de lista general no ordenada, establezca el margen y el relleno en 0, el estilo de la lista en ninguno, el ancho en automático y el flotador a la izquierda. Luego aplique un estilo a los elementos de la lista contenidos en la lista desordenada (li). De nuevo, flotamos a la izquierda, pero note que esta vez configuramos la visualización en? Bloquear? y nuestros márgenes a 0 1px.
Echa un vistazo a tu página en Safari. Los elementos de la lista deben alinearse horizontalmente ahora.
Estilo del texto
Ahora dirígete a los elementos del enlace (a) en el menú. Establezca la pantalla para bloquear, el flotador a la izquierda, la altura a 45 px y el color a blanco. Para eliminar el subrayado del enlace, establezca la decoración de texto en ninguno. Finalmente, para separar un poco los enlaces, ajuste el relleno a 0 0 0 30px (en el sentido de las agujas del reloj: 0 superior, derecha 0, inferior 0, izquierda 30).
El texto debería verse más cerca de donde lo queremos ahora, pero aún está un poco desviado.
Esta vez, diríjase a la lista desordenada, al elemento de la lista, a los elementos del enlace (la segmentación se vuelve un poco loca). Note que he agregado más relleno para alinear mejor las cosas y establecer una altura y flotar. A continuación, vemos un poco de código que tomé prestado de Chris Coyier en CSS-Tricks que nos da una buena fuente para el menú. Esencialmente, HelveticaNeue-Light es nuestra opción preferida aquí para que los espectadores que lo tienen instalado lo vean.Aquellos que no lo hagan simplemente volverán a la siguiente fuente en línea hasta que su navegador encuentre una opción instalada. En palabras de Chris, ¿podría también usar la mejor Helvética que puedas? ?
¡Ahora el texto de nuestro menú está bellamente decorado y en su lugar!
Añadiendo efectos Hover
Nuestro último paso es agregar algunos efectos de desplazamiento agradables para que pueda ver fácilmente qué opción está a punto de seleccionar. Dirigiremos los enlaces al vuelo estacionario con nuestro primer fragmento de código y los intervalos al vuelo estacionario en nuestro segundo. Aviso debajo de? Fondo? Inserté la misma imagen de fondo que usamos para la barra de menú. Esto es así que nuestra opción de desplazamiento mantiene el bonito aspecto brillante. Sin embargo, esta vez establezco el color de fondo a un gris más oscuro. Esto proporciona la diferenciación en nuestro efecto hover.
Voila! Ahora tenemos un menú CSS hermosamente brillante con un bonito efecto de rollover.
Cambiando el color
La mala noticia es que los navegadores sin soporte de PNG no mostrarán esto correctamente. La buena noticia es que, para los navegadores que admiten PNG (ya sabes, los navegadores del siglo XXI), esta configuración hace que sea muy fácil cambiar completamente el aspecto del menú con solo dos ajustes de valor de color CSS.
Simplemente busque los dos lugares en su CSS donde aparece la imagen de fondo (una vez para la barra y una vez para el rollover) y cambie los colores anteriores. Mira lo que sucede si creamos otro menú y sustituimos # 3d359a para el color principal y # 5749e7 para el color de desplazamiento.
Conclusión
Espero que hayas aprendido una o dos cosas sobre CSS y que te hayan inspirado a experimentar con la transparencia por el bien de la flexibilidad. Puede crear fácilmente este mismo efecto utilizando JPG, pero tomaría más imágenes y requeriría que cree nuevas imágenes en Photoshop cada vez que quiera cambiar el color.