CSS Interactivo // Frontend I

1. Seleccionar Componente

2. Temas Rápidos (Presets)

Padding (Relleno Interno) 12px

Margin (Separación Externa) 10px

Grosor del Borde 2px

Estilo del Borde

Border Radius (Redondeado) 8px

Fondo

Borde

Fuente (font-family)

Tamaño de Letra (font-size) 1rem

Espacio de Letras (letter-spacing) 0px

Alineación del Texto

Transformación

Todo Mayúsculas (uppercase)

Color Texto

Sombra Texto

Difuminado Sombra Texto 0px

Afecta a la imagen de portada y del perfil en la tarjeta.

Escala de Grises (grayscale) 0%

Sepia (sepia) 0%

Brillo (brightness) 100%

Contraste (contrast) 100%

Solape de Avatar (Margin Negativo) -40px

Aplica Flexbox para alinear elementos hijos (activo en Lista Flexbox).

display

Activar Flexbox (display: flex)

Dirección (flex-direction)

Alineación Horizontal (justify-content)

Alineación Vertical (align-items)

Espacio entre Ítems (gap) 10px

Ajuste de Envoltura

Permitir saltar de línea (flex-wrap: wrap)

Sombra del Elemento (box-shadow)

Difuminado Sombra (blur) 15px

Color Sombra

Opacidad Sombra 0.15

Estilo Cyberpunk de Sombras

Glow / Resplandor de Neón Doble

Comportamiento al pasar el Mouse (:hover)

Duración de Transición 0.3s

Escalar (scale) al Hover 1.05

Desplazamiento Vertical (translateY) -4px

Girar (rotate) al Hover 0deg

Vista Previa

Simular Hover (:hover)

Juana Escutia

Estudiante de Frontend I

Me apasiona diseñar interfaces bonitas e interactivas utilizando HTML puro y CSS estilizado.

HTML5

CSS3

Flexbox

Grid

JavaScript

Responsive

Herramienta	Dominio	Propósito
VS Code	Medio	Editor de Código
Chrome DevTools	Avanzado	Pruebas y Depuración
Figma	Básico	Diseño Visual

Explicación del Concepto

Mueve un slider o selecciona un control a la izquierda para ver qué hace esa propiedad en detalle.

1. Seleccionar Componente

2. Temas Rápidos (Presets)

Vista Previa

Juana Escutia

Explicación del Concepto

Código CSS Generado