Logo imyisusdev imyisusdev

CSS y el Estilo Neo-brutalista

Clase 3: Pintura, Decoración y Flexbox

¿Qué es CSS?

Origen: Cascading Style Sheets

Hojas de Estilo en Cascada. Es el lenguaje que le da color, fuentes y vida al esqueleto gris de HTML.

La analogía de la casa:

Si HTML es el plano y los ladrillos, CSS es la pintura, la decoración, las alfombras y el diseño de interiores de cada habitación.

🎨 Selectores: Indican qué elemento pintar.
📏 Propiedades: Indican qué aspecto cambiar (color, borde, tamaño).
💎 Valores: Indican cómo queremos que quede (rojo, 4px, 200px).

Sintaxis Básica de CSS

La analogía de la pared

Si querés pintar una pared específica de tu casa, tenés que seleccionarla, decidir qué propiedad cambiar y aplicar el valor.

El CSS se escribe seleccionando la etiqueta HTML y abriendo llaves { } para encerrar las reglas de estilo.

h1 {
color: #4f46e5;
font-size: 32px;
}
Selector = h1 | Propiedades = color, font-size

¿Qué es la Cascada? (Cascading)

El orden de las reglas importa 🌊

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Esto significa que los estilos caen como una cascada y se aplican de arriba a abajo.

¡Regla de oro!:

Si escribís dos reglas contradictorias para el mismo elemento con la misma importancia, la última en leerse "pisa" a las anteriores.

h1 {
  color: blue;
}

h1 {
  color: red;
}
❓ ¿De qué color se pinta el h1?
¡RED! (Rojo) porque está al final del código.

Selectores Básicos en CSS

¿Cómo elegimos qué pintar?

Para aplicar estilos en CSS, necesitamos indicarle al navegador a qué elementos nos referimos. Hay tres formas básicas:

  • 🏷️ Etiqueta: Afecta a todos los elementos de ese tipo (ej: h1, p, a).
  • 🎯 Clase (.): Selecciona elementos por su atributo class. Lleva un punto inicial y se puede reutilizar en muchas etiquetas.
  • 💎 ID / Identificador (#): Selecciona un único elemento con ese id específico. Lleva un hashtag.
/* Por Etiqueta */
h1 { color: black; }
/* Por Clase (lleva punto) */
.btn-linktree { background: #c2f0c2; }
/* Por ID (lleva #) */
#avatar { border-radius: 50%; }

Formatos de Color en CSS

Pintando con Código

CSS nos permite definir los colores de nuestros designs usando distintos formatos:

  • 🎨 Nombres de Color: Colores predefinidos por el navegador como red, blue, transparent.
  • #️⃣ Hexadecimal (HEX): El estándar más usado. Empieza con # seguido de 6 caracteres (Rojo, Verde, Azul). Ej: #ff007f.
  • 🌈 RGB / RGBA: Define la mezcla de Rojo, Verde y Azul de 0 a 255. La "A" de RGBA es para la opacidad o transparencia (de 0 a 1).
/* Color por Nombre */
color: red;
/* Hexadecimal (#RRGGBB) */
color: #ff007f; /* Rosa Neón */
/* RGB y RGBA (Transparencia) */
color: rgb(255, 0, 127);
background: rgba(0, 0, 0, 0.5); /* 50% opacidad */

El Modelo de Cajas (Box Model)

Todo elemento en HTML es una caja invisible.

La analogía: La Taza y su Caja

Pensalo como enviar una taza por correo:

  • 🍵 Content: La taza misma.
  • 📦 Padding (Relleno): El plástico de burbujas interno para proteger la taza.
  • 📦 Border (Borde): El cartón de la caja.
  • 🚚 Margin (Margen): La distancia vacía entre esta caja y otras encomiendas.
Margin (Espacio exterior)
Border (Caja de cartón)
Padding (Burbujas / Aire interno)
🍵 Content (La taza / Tu texto)

El truco final del Box Model

box-sizing: border-box 📦

Por defecto, si una caja mide 200px de ancho y le agregás 20px de padding, la caja se expande a 240px. ¡Se agranda y rompe tu maquetación!

La solución:

Al aplicar box-sizing: border-box, le decís a la caja: *"mantené tu ancho exacto y meté el padding y el borde hacia adentro"*.

Sin border-box (content-box)
Ancho 200px + Padding 20px =
¡240px totales! (Se ensancha)
Con border-box (¡El estándar!)
Ancho 200px (Padding va hacia adentro) =
¡200px totales exactos!

Flexbox y la Alineación

¿Qué es Flexbox?

Es una herramienta de CSS diseñada para ordenar, centrar y distribuir elementos fácilmente sin que se rompa la maquetación.

Los dos ejes principales:

• Main Axis: El eje horizontal (por defecto).
• Cross Axis: El eje vertical perpendicular.

display: flex;
Activa el modo Flexbox en el contenedor madre.
flex-direction: column / row;
Alinea en vertical (columna) o en horizontal (fila).
justify-content: center;
Centra los elementos a lo largo del eje principal.

Flexbox: La Caja de Juguetes

Analogía de Organización Física

Ordenando juguetes

Imaginá que tenés una caja contenedora (el "Flex Container") y querés ordenar autitos y bloques adentro:

  • 🧸 flex-direction: row: Ponés los juguetes uno al lado del otro en una sola fila.
  • 🧸 flex-direction: column: Apilás los juguetes uno arriba del otro en una torre.
  • 🧸 gap: 10px: Dejás un espacio físico de 10px entre juguete y juguete para que no se golpeen.
Caja de Juguetes (Flex Container)
🚗
🧸
🧱

display: flex; flex-direction: row; gap: 16px;

Flexbox: Las Butacas de Cine

Analogía de Distribución de Asientos

Alineando espectadores

Imaginá una fila entera de butacas en una sala de cine. ¿Cómo acomodamos al público?

  • 🎬 justify-content: flex-start: Todos sentados a la izquierda, cerca de la puerta de entrada.
  • 🎬 justify-content: center: Todos sentados al centro, alineados con la pantalla.
  • 🎬 justify-content: space-between: Distribuidos de extremo a extremo, dejando el máximo espacio libre al medio.
Fila de Cine (Fila Flex)
🍿
🎬
🥤

justify-content: space-between;

Paso 1: El Escenario (body y reset)

¿Qué hacemos aquí?

  1. 1. Quitamos los márgenes por defecto del navegador con el selector universal *.
  2. 2. Centramos la futura tarjeta al medio de la pantalla usando Flexbox en el body.
  3. 3. Le damos un fondo crema suave y cargamos la tipografía Outfit.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #f6f5f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Paso 2: La Caja de la Tarjeta (.card)

¿Qué hacemos aquí?

  1. 1. Limitamos el ancho de la tarjeta a un tamaño óptimo (max-width: 380px).
  2. 2. Agregamos el relleno interno (`padding`) para que el contenido no toque los bordes.
  3. 3. Aplicamos el estilo de diseño: borde negro de 4px, esquinas redondeadas y la sombra rígida plana.
.card {
  background-color: #ffffff;
  max-width: 380px;
  width: 100%;
  padding: 35px 25px;
  border: 4px solid #000000;
  box-shadow: 8px 8px 0px #000000;
  border-radius: 20px;
  text-align: center;
}

Paso 3: Quién soy (avatar y título)

¿Qué hacemos aquí?

  1. 1. Achicamos la imagen de perfil a un tamaño coherente (`width: 110px`).
  2. 2. Le damos forma circular perfecta aplicando border-radius: 50%.
  3. 3. Agregamos el título en mayúsculas, negrita y con letra grande.
header img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  margin-bottom: 15px;
}

header h1 {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
}

Paso 4: Mis Redes (lista y enlaces)

¿Qué hacemos aquí?

  1. 1. Quitamos los puntitos/viñetas de la lista de HTML con list-style: none.
  2. 2. Diseñamos cada enlace a como un botón de bloque (`display: block`).
  3. 3. Le damos estilo de botón físico: fondo blanco, borde de 3px, sombra y bordes redondeados.
section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

section ul li a {
  display: block;
  text-decoration: none;
  color: #000000;
  background-color: #ffffff;
  padding: 12px;
  font-weight: 800;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  border-radius: 10px;
}

Paso 5: El Click Físico (efectos hover)

¿Qué hacemos aquí?

Para simular que el botón realmente se hunde al presionarlo o pasar el mouse:

  1. 1. Empujamos el botón ligeramente hacia abajo y a la derecha con translate(2px, 2px).
  2. 2. Reducimos el tamaño de la sombra plana de 4px a 2px en la misma proporción.
  3. 3. Agregamos transition: all 0.15s para que el movimiento no sea brusco.
/* En el tag a de la diapo anterior agregamos: */
transition: all 0.15s ease-in-out;

/* Y creamos la regla hover: */
section ul li a:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000000;
}

Paso 6: Detalle y Personalización

¿Qué hacemos aquí?

Para que la tarjeta luzca profesional y colorida, le damos a cada botón un color de fondo diferente cuando pasamos el mouse por encima usando sus selectores de clase individuales:

  • 🌳 Linktree: Verde suave (#c2f0c2)
  • 💻 GitHub: Gris suave (#e2e8f0)
  • 🎥 YouTube: Rojo suave (#ffcccc)
/* Linktree (.btn-linktree) */
.btn-linktree:hover {
  background-color: #c2f0c2;
}

/* GitHub (.btn-github) */
.btn-github:hover {
  background-color: #e2e8f0;
}

/* YouTube (.btn-youtube) */
.btn-youtube:hover {
  background-color: #ffcccc;
}

Tu Superpoder: El Inspector (DevTools) 🛠️

Inspeccionando y "Hackeando" la Web

Cualquier navegador moderno tiene herramientas de desarrollador. Presionando F12 o haciendo Click derecho -> Inspeccionar, puedes ver y modificar el HTML y CSS de cualquier sitio en tiempo real.

¡Ideas divertidas para probar en vivo!:
  • 🏦 El saldo millonario: Edita el saldo de tu cuenta para tener 2 millones de dólares por unos segundos.
  • 🐦 El Tweet del siglo: Cambia el texto de un tweet de Elon Musk para que parezca que te contrató.
  • 📰 Titular de portada: Modifica el título de un diario famoso y pon tu nombre en primera plana.
Demo de Banco en Vivo
Consola del Desarrollador

1️⃣ Click derecho en el texto que quieres cambiar.

2️⃣ Selecciona "Inspeccionar".

3️⃣ En la pestaña Elements, haz doble click sobre el texto y escribe tu versión.

4️⃣ ¡Mira la pantalla! (Al recargar la página todo vuelve a la normalidad 😅).

* Nota: Los cambios son locales en tu navegador, no alteras el servidor real.

Tu Turno

Aplicando Estilos CSS 🏆

Vinculá el archivo CSS en tu HTML y empezá a maquetar el reset, centrar el body con Flexbox y darle la sombra dura brutalista a tu Bio Card.

estilos.css
body {
display: flex;
justify-content: center;
}
.card {
border: 4px solid #000;
box-shadow: 8px 8px 0px #000;
}

Demos y Variantes de Referencia 🎨

Inspiración de estilos para los alumnos (Abrir en pestaña nueva)

Botones con Texto (Vertical)

1. Neo-brutalista Premium 2. Cyber Neon / Cyberpunk 3. Glassmorphism / Vidrio

Solo Iconos (Horizontal)

1. Neo-brutalista (Horizontal) 2. Cyber Neon (Horizontal) 3. Glassmorphism (Horizontal)

¡Manos a la Obra! 🚀

Reto de la Clase

  1. Vincular estilos.css en tu archivo de CodePen.
  2. Centrar el contenedor .card usando Flexbox en el body.
  3. Aplicar los bordes gruesos y las sombras duras de color negro.
  4. Maquetar tus redes como botones con efecto hover interactivo y colores pastel.
imyisusdev - CSS y Diseño Web