Diseño Responsivo con CSS: Uso de Clases y Sombra

¿Qué logramos en la maquetación anterior?

En la clase anterior, culminamos la maquetación de la sección de todos los "Cavs" (o categorías) de nuestro blog. Implementamos un diseño responsivo eficiente utilizando diferentes clases para pantallas grandes, medianas y pequeñas. Así, ajustamos el sistema de grillas o "Grid System" para asegurar que la presentación se adapte correctamente a distintos dispositivos.

El diseño responde de la siguiente manera:

• Pantallas grandes: Las columnas ocupan tres secciones.
• Pantallas medianas: La distribución cambia a seis columnas cada una.
• Pantallas pequeñas: Las columnas se extienden a ocupar toda su superficie.

Este enfoque no solo es visualmente atractivo, sino que también mejora la experiencia del usuario a la hora de interactuar con el contenido en diversas plataformas.

¿Cómo mejoramos el diseño con sombras y nuevos estilos?

Para aportar profundidad y una estética más sofisticada, trabajamos en la inclusión de sombras y estilos adicionales. Esto fue lo que hicimos:

1. Inclusión de sombras: Aplicamos sombras utilizando las clases de "Materialize CSS", aumentando la percepción visual de las imágenes y logrando que los elementos destacados resalten más.
2. Personalización de estilos: Creamos un nuevo contenedor para el input y afinamos los estilos mediante Flexbox, centrándolo visualmente y ajustando márgenes para una alineación adecuada.

/* Adición de sombra en elementos */
.imagen, .logo {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Centrado de input usando flexbox */
.input-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0 auto;
}

Con estos cambios, no solo logramos un diseño más atractivo sino también funcional y ordenado, garantizando que cada elemento visual cumpla su propósito con una presentación elegante.

¿Cómo personalizamos componentes usando CSS?

Para un control más sofisticado de los estilos, usamos el sistema de herencia de CSS y personalizamos nuestras propias clases al trabajar con las ofrecidas por Materialize CSS. Esto nos permitió:

• Sobrescribir estilos por defecto.
• Aplicar herencia CSS dirigiéndonos directamente a los elementos hijos.

Por ejemplo, en CSS, podemos especificar un elemento hijo dentro de una clase padre, asegurando un estilo uniforme que respeta el diseño general, pero con personalización suficiente para destacar:

/* Uso de herencia CSS para estilizar un hijo específico */
.input-contenedor.icono > i {
    margin-right: 15px;
}

Esta técnica no solo es eficiente, sino crucial al trabajar en entornos donde coexistirán estilos globales y locales, como ocurre cuando usamos librerías CSS prediseñadas.

Finalmente, estos cambios se completaron con la actualización de imágenes para nuestros Cavs, enriqueciendo visualmente el contenido y asegurando que cada categoría tenga su propia representación gráfica destacada. Con estos avances, nos preparamos para seguir adelante con la construcción de nuevos elementos del proyecto en las siguientes lecciones.