Flexbox y Clamp para crear un Hero responsive

Clase 5 de 17 • Curso de Responsive Design: Maquetación Mobile First

Marbe Moreno

student•

iecgerman .

student••

.outlined {
      color: var(--color-white);
      text-shadow:
            1px 0px var(--color-black),
            -1px 0px var(--color-black),
            0px -1px var(--color-black),
            1px 1px var(--color-black),
            -1px -1px var(--color-black),
            1px -1px var(--color-black),
            -1px 1px var(--color-black);
}

Lo que acabamos de hacer en el min 9:07 es la técnica de "Shadow Wrapping" (Envoltura de sombra). Al poner valores positivos y negativos (como 1px y -1px), estás obligando a la sombra a expandirse en todas las direcciones, creando ese borde sólido que parece el contorno de un sticker físico.

en el min 18:50

la profe le borrá el - (menos), si haces eso ya todo sera de 1px positivo y no harías bien el effecto de sticker, sería sólo una sombra. yo lo dejé igual por el momento.

Formación Onlines

student•

creo que lo más correcto es :

text-shadow:

var(--outline-width) 0 0 black,

calc(-1 * var(--outline-width)) 0 0 black,

0 var(--outline-width) 0 black,

0 calc(-1 * var(--outline-width)) 0 black;

pero el tema es que deja en evidencia que text-shadow no anda bien si lo usas con muchos pixeles (me refiero a que los bordes de las letras quedan muy rústicos)

Flexbox y Clamp para crear un Hero responsive

Fundamentos de Mobile First

¿Por qué tu web debe ser Mobile First?

¿Qué es Mobile First y cómo empezar?

Prepara tu proyecto Mobile First

Estructura Mobile First

Construye un header responsive con HTML semántico

Flexbox y Clamp para crear un Hero responsive

Build mobile-first skill cards with CSS

Cómo CSS Grid Areas reorganiza tu contenido

Patrones responsive con CSS Grid y auto-fit

Optimización de Performance y Accesibilidad

Cambia el layout con Flexbox según la pantalla

Optimiza imágenes con picture y srcset

Fallbacks de Cloudinary en picture elements

Prueba tu web en el teléfono con Live Server

Debug en iOS Safari

inputmode y autocomplete en HTML

Pruebas de rendimiento Mobile First con Lighthouse

Container Queries vs Media Queries en CSS

Code review Mobile First con AI