CSS Intermedio

1. Pseudoclases

Las pseudoclases permiten estilizar elementos en estados específicos:

• :hover: Cuando el mouse pasa sobre un elemento.
• :nth-child(n): Para apuntar a elementos según su posición.
• :focus: Cuando un campo tiene el foco.

a:hover {
    color: red;
}
li:nth-child(odd) {
    background-color: lightgray;
}

2. Pseudoelementos

Los pseudoelementos te permiten agregar contenido o estilos específicos:

• ::before: Inserta contenido antes del elemento.
• ::after: Inserta contenido después del elemento.
• ::first-line: Aplica estilos a la primera línea de un texto.

p::before {
    content: "🔹 ";
    color: blue;
}

3. Layouts con Flexbox

Flexbox es un modelo de diseño poderoso para alinear elementos:

• display: flex; Activa Flexbox en el contenedor.
• justify-content: Controla la alineación horizontal.
• align-items: Controla la alineación vertical.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

¡Perfecto para crear diseños responsivos!

4. Layouts con Grid

CSS Grid es ideal para crear layouts complejos:

• display: grid; Activa Grid en el contenedor.
• grid-template-columns: Define columnas.
• grid-gap: Define espacios entre filas y columnas.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

5. Transiciones y Animaciones

CSS permite agregar efectos de transición y animación:

• transition: Aplica un efecto suave entre cambios de estilo.
• @keyframes: Define una animación personalizada.

button {
    transition: background-color 0.3s;
}
button:hover {
    background-color: darkblue;
    animation: mover 1s;
}

@keyframes mover {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

Conclusión

Con estos conceptos intermedios, puedes crear diseños más complejos y dinámicos.

Experimenta con layouts, animaciones y estados dinámicos para mejorar tus interfaces.