Diseño y Layout

Modelo de Caja

Contenido

Margin

Espacio exterior que separa el elemento de otros elementos

.elemento {
    margin: 20px; /* Todos los lados */
    margin: 10px 20px; /* Vertical | Horizontal */
    margin-top: 15px;
}

Border

Línea que rodea el padding y el contenido

.elemento {
    border: 2px solid #1c2566;
    border-radius: 8px; /* Esquinas redondeadas */
}

Padding

Espacio interior entre el contenido y el borde

.elemento {
    padding: 15px;
    padding-left: 30px;
}

Flexbox y Grid

Flexbox (1D)

1
2
3
.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

CSS Grid (2D)

1
2
3
4
5
6
.contenedor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}

¿Cuándo usar cada uno?

  • Flexbox: Diseños unidimensionales (filas o columnas), alineación precisa, componentes pequeños
  • Grid: Diseños bidimensionales complejos, layouts completos de página, estructuras regulares

Animaciones CSS

Transiciones CSS

Pasa el mouse
Haz clic
/* Transición básica */
.elemento {
    transition: propiedad duración timing-function delay;
}

/* Ejemplo concreto */
.boton {
    background-color: #4a6bff;
    transition: background-color 0.3s ease, transform 0.2s;
}

.boton:hover {
    background-color: #1c2566;
    transform: scale(1.05);
}

Propiedades animables

  • Colores (color, background-color, border-color)
  • Tamaños (width, height, font-size)
  • Posición (margin, padding, top, left)
  • Transformaciones (transform, opacity)

Animaciones con @keyframes

Rebote
Rotación
Pulso
/* Definición de la animación */
@keyframes nombre-animacion {
    0% { /* Estilos iniciales */ }
    50% { /* Estilos intermedios */ }
    100% { /* Estilos finales */ }
}

/* Aplicación a un elemento */
.elemento {
    animation: nombre-animacion 2s infinite alternate;
}

Propiedades de animación:

  • animation-name: Nombre de la keyframe
  • animation-duration: Duración (ej: 2s)
  • animation-timing-function: ease, linear, etc.
  • animation-delay: Retardo antes de comenzar
  • animation-iteration-count: Número de repeticiones
  • animation-direction: normal, reverse, alternate
  • animation-fill-mode: Estilos antes/después