CSS3 desde Cero

¿Qué es CSS3? CSS3 es la tercera versión de Cascading Style Sheets, el lenguaje utilizado para describir la presentación de documentos HTML. CSS3 introduce módulos que se desarrollan independientemente, permitiendo una evolución más rápida del estándar.

Historia de CSS:

CSS fue propuesto por primera vez por Håkon Wium Lie en 1994 mientras trabajaba con Tim Berners-Lee en CERN. CSS1 fue publicado como recomendación del W3C en 1996, CSS2 en 1998, y CSS3 comenzó a desarrollarse a principios de los años 2000.

Características principales de CSS3:

• Selectores avanzados: Selectores de atributo, pseudo-clases y pseudo-elementos
• Box Model mejorado: box-sizing, box-shadow, border-radius
• Layout moderno: Flexbox y Grid para diseños complejos
• Animaciones: Transiciones, animaciones keyframe y transformaciones
• Variables CSS: Custom properties para valores reutilizables

Tipos de Selectores:

/* Selector de elemento */
p { color: blue; }

/* Selector de clase */
.mi-clase { color: red; }

/* Selector de ID */
#mi-id { color: green; }

/* Selector de atributo */
input[type="text"] { border: 1px solid #ccc; }

/* Pseudo-clases */
a:hover { color: orange; }
li:nth-child(2n) { background: #f0f0f0; }

/* Pseudo-elementos */
p::first-line { font-weight: bold; }
p::before { content: "→ "; }

Combinadores:

• div p - Descendiente (todos los p dentro de div)
• div > p - Hijo directo
• div + p - Hermano adyacente
• div ~ p - Hermanos generales

Especificidad (de mayor a menor):

Componentes del Box Model:

Cada elemento en CSS es una caja rectangular compuesta por:

• Content: El contenido real del elemento
• Padding: Espacio entre el contenido y el borde
• Border: Borde que rodea el padding
• Margin: Espacio exterior que separa elementos

.elemento {
    /* Contenido */
    width: 300px;
    height: 200px;

    /* Padding */
    padding: 20px;
    padding: 10px 20px; /* vertical horizontal */
    padding: 10px 20px 15px 25px; /* top right bottom left */

    /* Border */
    border: 2px solid #333;
    border-radius: 10px;

    /* Margin */
    margin: 20px;
    margin: 0 auto; /* Centrado horizontal */
}

box-sizing:

/* El ancho incluye padding y border */
.elemento {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    /* El contenido será 260px (300 - 20 - 20) */
}

/* El ancho es solo del contenido (default) */
.elemento {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    /* El ancho total será 340px (300 + 20 + 20) */
}

Formatos de Color:

/* Nombres */
color: red;
color: transparent;

/* Hexadecimal */
color: #ff0000;
color: #f00; /* shorthand */

/* RGB/RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* con alpha */

/* HSL/HSLA */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* Modernos */
color: oklch(62.8% 0.25 29.23);
color: color(display-p3 1 0 0);

Background Properties:

.elemento {
    /* Color de fondo */
    background-color: #f0f0f0;

    /* Imagen de fondo */
    background-image: url('imagen.jpg');

    /* Múltiples imágenes */
    background-image: url('capa1.png'), url('capa2.png');

    /* Posición */
    background-position: center center;
    background-position: top right;

    /* Tamaño */
    background-size: cover;
    background-size: contain;
    background-size: 100% auto;

    /* Repetición */
    background-repeat: no-repeat;
    background-repeat: repeat-x;

    /* Shorthand */
    background: #f0f0f0 url('img.jpg') no-repeat center center / cover;
}

Gradientes:

/* Lineal */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, blue);

/* Radial */
background: radial-gradient(circle, red, blue);

/* Cónico */
background: conic-gradient(red, blue, red);

Container Properties:

.container {
    display: flex;

    /* Dirección */
    flex-direction: row; /* default */
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;

    /* Wrap */
    flex-wrap: nowrap; /* default */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;

    /* Alinear items (eje principal) */
    justify-content: flex-start; /* default */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;

    /* Alinear items (eje cruzado) */
    align-items: stretch; /* default */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;

    /* Alinear líneas (multi-row) */
    align-content: flex-start;
    align-content: center;
    align-content: space-between;
}

Item Properties:

.item {
    /* Factor de crecimiento */
    flex-grow: 0; /* default */
    flex-grow: 1;

    /* Factor de encogimiento */
    flex-shrink: 1; /* default */
    flex-shrink: 0;

    /* Tamaño base */
    flex-basis: auto; /* default */
    flex-basis: 200px;

    /* Shorthand */
    flex: 0 1 auto; /* grow shrink basis */
    flex: 1; /* flex-grow: 1 */

    /* Orden */
    order: 0; /* default */
    order: -1; /* mover al inicio */

    /* Alineación individual */
    align-self: auto; /* default */
    align-self: center;
}

Container Properties:

.container {
    display: grid;

    /* Definir columnas */
    grid-template-columns: 200px 200px 200px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-columns: 100px auto 100px;

    /* Definir filas */
    grid-template-rows: 100px 100px;
    grid-template-rows: repeat(2, 1fr);

    /* Template areas */
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";

    /* Gap */
    gap: 20px;
    row-gap: 10px;
    column-gap: 15px;

    /* Alineación */
    justify-items: center;
    align-items: center;
    place-items: center center;
}

Item Properties:

.item {
    /* Posicionamiento por línea */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column: 1 / 3; /* shorthand */
    grid-column: span 2; /* ocupar 2 columnas */

    grid-row-start: 1;
    grid-row-end: 3;
    grid-row: 1 / 3;
    grid-row: span 2;

    /* Posicionamiento por área */
    grid-area: header;

    /* Alineación individual */
    justify-self: center;
    align-self: center;
    place-self: center;
}

Ejemplo de Layout Completo:

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.main { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }

Position Property:

/* Default - flujo normal */
.elemento { position: static; }

/* Relativo a su posición original */
.elemento {
    position: relative;
    top: 10px;
    left: 20px;
}

/* Relativo al viewport (fijo al hacer scroll) */
.elemento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* Relativo al ancestro posicionado más cercano */
.elemento {
    position: absolute;
    top: 0;
    right: 0;
}

/* Relativo al flujo, pero con offset */
.elemento {
    position: sticky;
    top: 0;
}

Display Property:

Visibility vs Display:

/* Oculto pero ocupa espacio */
.elemento { visibility: hidden; }

/* Oculto y no ocupa espacio */
.elemento { display: none; }

Media Queries:

/* Mobile First */
.elemento { font-size: 14px; }

@media (min-width: 576px) {
    .elemento { font-size: 16px; }
}

@media (min-width: 768px) {
    .elemento { font-size: 18px; }
}

@media (min-width: 992px) {
    .elemento { font-size: 20px; }
}

/* Desktop First */
@media (max-width: 768px) {
    .elemento { font-size: 14px; }
}

Breakpoints Comunes:

Unidades Responsive:

/* Relativas al viewport */
width: 100vw; /* 100% del viewport width */
height: 100vh; /* 100% del viewport height */

/* Relativas al elemento padre */
width: 50%;
padding: 10%;

/* Relativas a la fuente */
font-size: 1rem; /* 16px default */
font-size: 1.5em; /* 1.5x del padre */

/* Fluid typography */
font-size: clamp(1rem, 2vw, 1.5rem);

Transiciones:

.boton {
    background: blue;
    transition: background 0.3s ease;
}

.boton:hover {
    background: red;
}

/* Múltiples propiedades */
.elemento {
    transition:
        transform 0.3s ease,
        opacity 0.5s ease-in-out,
        box-shadow 0.2s linear;
}

/* Shorthand */
.elemento {
    transition: all 0.3s ease 0.1s;
    /* property duration timing-function delay */
}

Timing Functions:

• ease - Lento, rápido, lento (default)
• linear - Velocidad constante
• ease-in - Empieza lento
• ease-out - Termina lento
• ease-in-out - Lento al inicio y final
• cubic-bezier(0.68, -0.55, 0.265, 1.55) - Custom

Keyframe Animations:

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.elemento {
    animation: fadeIn 0.5s ease-out;
    animation: pulse 2s infinite;
}

/* Múltiples animaciones */
.elemento {
    animation:
        fadeIn 0.5s ease-out,
        pulse 2s infinite 0.5s;
}

Animation Properties:

.elemento {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;

    /* Shorthand */
    animation: fadeIn 1s ease-in-out 0.5s infinite alternate forwards;
}

Transform 2D:

.elemento {
    /* Trasladar */
    transform: translate(50px, 100px);
    transform: translateX(50px);
    transform: translateY(100px);

    /* Rotar */
    transform: rotate(45deg);

    /* Escalar */
    transform: scale(1.5);
    transform: scaleX(2);
    transform: scaleY(0.5);

    /* Inclinar */
    transform: skew(30deg, 20deg);
    transform: skewX(30deg);
    transform: skewY(20deg);

    /* Múltiples transformaciones */
    transform: translateX(50px) rotate(45deg) scale(1.2);
}

Transform 3D:

.container {
    perspective: 1000px; /* Profundidad 3D */
}

.elemento {
    /* Rotación 3D */
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);

    /* Trasladar en 3D */
    transform: translateZ(100px);
    transform: translate3d(50px, 100px, 150px);

    /* Escalar en 3D */
    transform: scale3d(1, 1, 1);

    /* Transform-origin */
    transform-origin: center center;
    transform-origin: top left;
    transform-origin: 50% 50% 0;
}

Transform Style:

.container {
    transform-style: preserve-3d; /* Hijos en 3D */
}

.elemento {
    backface-visibility: visible; /* visible | hidden */
}

Declarar Variables:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-main: 'Roboto', sans-serif;
    --spacing-unit: 8px;
    --border-radius: 4px;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
}

Usar Variables:

.boton {
    background-color: var(--primary-color);
    font-family: var(--font-main);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* Con valor fallback */
.elemento {
    color: var(--texto-color, #333); /* #333 si no existe */
}

Variables en Media Queries:

:root {
    --font-size: 14px;
}

@media (min-width: 768px) {
    :root {
        --font-size: 16px;
    }
}

body {
    font-size: var(--font-size);
}

Variables con JavaScript:

// Leer variable
const primaryColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--primary-color');

// Modificar variable
document.documentElement.style
    .setProperty('--primary-color', '#ff0000');

// Tema oscuro/claro
function toggleTheme() {
    document.documentElement.setAttribute('data-theme',
        document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}

Tema Oscuro con Variables:

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

Portfolio Personal con CSS3:

Vamos a crear un sitio portfolio moderno utilizando todas las técnicas aprendidas:

/* Estructura de variables */
:root {
    --primary: #6c5ce7;
    --secondary: #a29bfe;
    --dark: #2d3436;
    --light: #f5f6fa;
    --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Layout principal */
.portfolio {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

/* Sidebar con sticky */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--gradient);
}

/* Animación de entrada */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar {
    animation: slideIn 0.6s ease-out;
}

/* Cards de proyectos */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}

.project-card {
    background: var(--light);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

Componentes a incluir:

• Sidebar fijo con navegación y foto
• Hero section con animación de texto
• Grid de proyectos con hover effects
• Sección de habilidades con barras animadas
• Formulario de contacto con validación CSS
• Modo oscuro con variables CSS