Un viaje a través de las bases de CSS: Diseñando el Menú CBD de Queen Indika
¡Bienvenidos al mundo del diseño web con CSS!
Hoy, vamos a desglosar el código CSS para la creación del menú de "Queen Indika CBD" (Una tienda ficticia de productos de CBD) y explorar cómo utilizar este lenguaje para crear un diseño elegante para tus sitios web.
Puedes ver el código aquí y el resultado final del sitio aquí .
 |
| Así luce nuestro menú. |
Introducción
Antes de sumergirnos en el código CSS, observemos la estructura HTML básica de la página. El archivo HTML contiene una estructura jerárquica que organiza el contenido de manera lógica. Luego, el CSS se encarga de darle estilo a esta estructura.
Para vincular el archivo HTML a nuestro archivo de hoja de estilos CSS,
generalmente llamado "styles.css" tenemos que agregar en el
<head> la siguiente línea de código:
Estilización Global
El código CSS comienza definiendo algunos estilos globales para el cuerpo del documento. Aquí se establece la imagen de fondo con la propiedad background-image, la fuente utilizada en todo el documento con propiedad font-family y se añade un padding para dar un margen interno al contenido.
Encabezados y Estilo de Texto
El siguiente bloque de código se enfoca en los encabezados (h1 y h2). Establece el tamaño de fuente con font-size, el espaciado superior en inferior con margin-top y margin-bottom. Todo expresado en pixels (px). Además, la clase .established se utiliza para aplicar un estilo cursiva al texto.
Aquí, se demuestra cómo puedes personalizar el aspecto de los encabezados y cómo las clases permiten aplicar estilos específicos a elementos particulares.
Podemos seleccionar varios tags para aplicarles el mismo estilo. En este caso vamos a centrar el texto con "text-align: center".
Así luce la parte superior del menú con su h1, h2, la clase .established, y la línea divisoria hr.
Diseño del Menú
|
Así luce la parte superior del menú con su h1, h2, la clase .established, y la línea divisoria hr. |
El elemento con la clase .menu es el contenedor principal del menú y se estiliza de la siguiente manera:
Le damos un width del 80% para que el ancho del menú ocupe siempre un 80% de la pantalla, de esta manera nos aseguramos que se pueda visualizar correctamente en diferentes dispositivos con diferentes tamaños de pantalla.
Seleccionamos un color de fondo que resalte el menú sin
dificultar la lectura del texto con la propiedad
background-color. El valor está expresado en el código
HEX (notación hexadecimal), también se pueden seleccionar
algunos colores predeterminados por sus nombres (white, blue, pink, etc.) o con notación RGB (red, green, blue).
Con el
margin-left y el margin-right en auto vamos a centrar el
contenedor en la página.
Los bordes redondeados (border-radius)
agregan un toque de elegancia.
Imágenes y Líneas Separadoras
La línea hr nos separa el título del menú de los productos de la
tienda. Le daremos grosor con el height, y color de borde y de
relleno con background-color y border-color.
Los íconos
de las flores y aceites del tag img se centran horizontalmente en el
contenedor mediante margin-left y margin-right. Además, se
utiliza margin-top y margin-bottom para ajustar la
posición vertical de la imagen.
En CSS, el valor display controla cómo se representa un elemento en la página. Hay varios valores posibles, y block es uno de ellos. Cuando aplicas display: block a un elemento, estás diciendo que ese elemento debe comportarse como un bloque de construcción independiente, ocupando todo el ancho disponible de su contenedor. Las imágenes, por defecto, son inline elements por ende en principio se colocarán en línea con el flujo de texto, y su ancho y alto se ajustarán al contenido de la imagen.
Por eso al cambiar a display: block, estás cambiando su comportamiento. Ahora, la imagen se comporta como un bloque de construcción independiente, lo que significa que ocupa todo el ancho disponible de su contenedor.
|
| Nuestra línea hr, el h2 y la imagen con display: block . |
Estilos Personalizados para los productos del menú
Aplicamos estilos de fuente personalizados a los encabezados h1 y h2 con font-family para hacerlos más atractivos visualmente, utilizando la fuente "Impact", para mayor compatibilidad dejamos también una fuente de respaldo "serif", es decir que en caso de que el navegador no reconozca la fuente "Impact" la reemplazará por "serif".
|
| Aquí se ve claramente la fuente "Impact" en el h2, y como en el menú hay otro tipo de fuente "sans-serif" |
Diseño de los elementos del menú
En esta parte del código CSS, se están aplicando estilos a los párrafos (<p>) que están dentro de elementos con la clase .item.
Con display: inline-block los elementos <p> dentro de .item se muestren como bloques en línea. Esto significa que se comportarán como elementos en línea (ocupan solo el espacio necesario horizontalmente) pero también se pueden aplicar márgenes y propiedades de bloque (como el ancho y alto). De esta manera vamos a poder trabajar por separado los estilos de los nombres de los productos y sus precios a pesar de que visualmente van a estar en la misma línea horizontalmente.
Luego con margin-top y
margin-bottom agregamos espacio entre los párrafos, lo que mejora
la legibilidad y el aspecto visual al separar los elementos.
Por
último con la font-size: 18px garantizamos una
fuente legible y coherente para estos elementos.
Luego, el código continúa con estas clases:
Las clases .variety y .oil se aplican a los elementos de menú que contienen información sobre variedades de flores y aceites, respectivamente. Se establece text-align: left para alinear el texto a la izquierda y width: 75% para que estos elementos ocupen el 75% del ancho disponible en su contenedor. Esto permite que el texto se muestre en la parte izquierda del contenedor.
Por otro lado la clase .price se aplica a los elementos de menú que muestran los precios. Se establece text-align: right para alinear el texto a la derecha y width: 25% para que estos elementos ocupen el 25% del ancho disponible en su contenedor. Esto alinea los precios a la derecha dentro de su contenedor.
Con la estilización de la alineación y el ancho de éstos elementos logramos un diseño uniforme y legible para nuestro menú.
|
| Aquí se ve el resultado de como el nombre de cada producto y su precio están alineados verticalmente pero horizontalmente separados para facilitar la legibilidad del menú. |
Estilos del Pie de Página
Este código ilustra cómo dar estilo a elementos específicos dentro del pie de página y cómo crear efectos de interacción, como cambiar el color de los enlaces al pasar el mouse sobre ellos.
El elemento <footer> se utiliza generalmente para ubicar información en la parte inferior de una página web.
En nuestro caso es primer elemento del footer es un <a>, un link al blog modernclix. Vamos a darle un tamaño de letra más pequeño para que no desvíe la atención del contenido del menú. A este link le vamos a asignar 3 pseudoclases. Las pseudoclases CSS especifican un estado especial del elemento seleccionado:
- a:visited: Esta es una regla de estilo que se aplica a los enlaces <a> después de que el usuario los haya visitado. En este caso se le asignará el color: black.
- a:hover: Esta regla se aplica cuando el cursor del mouse se coloca sobre un enlace. Aquí, se cambia el color del texto de los enlaces a marrón cuando se pasa el cursor sobre ellos. Esto proporciona un efecto visual para indicar que el enlace es interactivo.
- a:active: Esta regla se aplica cuando un usuario hace clic en un enlace, es decir, cuando el enlace está siendo activamente "presionado" por el usuario. El color del texto de los enlaces se establece en marrón cuando están siendo activamente seleccionados.
Por último tenemos la clase .credits. con su margin-bottom: 5px que agrega un margen inferior debajo de este tag. La clase .credits se utiliza para dar estilo a los créditos de la página, es decir, da información sobre quién creó el sitio.
|
| El link del footer con su pseudoclase hover. |
Esto es todo!
Esperamos que este recorrido por el código CSS de Queen Indika CBD haya sido educativo y estimulante. Como puedes ver, CSS es una herramienta poderosa para dar estilo a tus sitios web y crear experiencias visuales únicas. Recuerda que la práctica es la clave para perfeccionar tus habilidades en CSS, así que ¡diviértete experimentando y creando!
Comentarios
Publicar un comentario