Outline y Box-Shadow
Añada contornos de enfoque y efectos de sombra alrededor de los elementos mediante outline y box-shadow.
Outline y Box-Shadow es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Propiedad outline
outline dibuja una línea fuera del borde. No afecta al diseño: los elementos que lo rodean no se desplazan. El formato abreviado es igual que el de border: ancho, estilo y color.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset aleja el contorno del borde. Los valores positivos lo desplazan hacia fuera; los valores negativos lo mueven hacia dentro, creando un efecto de recorte.
<button class="focus-demo">Keyboard-focused Button</button>
outline frente a border
Diferencias principales:
- El contorno no afecta al flujo del diseño
- El contorno no se puede establecer por lado (no existe outline-top)
- El contorno puede no ser rectangular (en algunos navegadores sigue las formas del anillo de foco)
- El contorno siempre está fuera del borde
:focus-visible frente a :focus
Prefiera :focus-visible para los anillos de foco del teclado. Muestra el contorno solo cuando el foco se ha recibido mediante el teclado, no al hacer clic con el ratón, lo que evita ruido visual para quienes usan un dispositivo señalador y mantiene la accesibilidad.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Conceptos básicos de box-shadow
box-shadow añade un efecto de sombra alrededor de un elemento. El formato abreviado es: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Explicación de los valores de box-shadow
Cada valor de box-shadow:
- offset-x: desplazamiento horizontal (negativo = izquierda)
- offset-y: desplazamiento vertical (negativo = arriba)
- blur-radius: suavidad (0 = nítida)
- spread-radius: aumenta o reduce el tamaño de la sombra
- color: color de la sombra (se recomienda RGBA)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Sombra interna con inset
Añada la palabra clave inset para dibujar la sombra dentro del elemento y crear una apariencia presionada o hundida.
<input class="input focus-demo" type="text" value="Focused input" />
Varias sombras de caja
Separe varias sombras con comas. Se apilan de delante hacia atrás:
<span class="badge">3</span>
box-shadow frente a filter: drop-shadow
box-shadow solo tiene en cuenta la forma de la caja. filter: drop-shadow() sigue la forma representada, incluida la transparencia, por lo que es ideal para iconos PNG con fondos transparentes.
<div class="icon">★</div>
Sistema de elevación con box-shadow
Material Design y otros sistemas similares definen varios niveles de sombra para representar la elevación visual. Asigne variables CSS a valores de sombra:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Animación eficiente de box-shadow
Animar box-shadow provoca un repintado en cada fotograma. Para mejorar el rendimiento, anime la opacity de la sombra de un pseudoelemento o use filter: drop-shadow(), que puede componerse.
Comprobación rápida
¿Qué palabra clave de box-shadow dibuja la sombra dentro del elemento?
Resumen
outline dibuja fuera del borde sin afectar al diseño; úselo para los indicadores de foco. box-shadow añade sombras de profundidad mediante desplazamiento, desenfoque, extensión y color. Use inset para las sombras internas. Se pueden superponer varias sombras separándolas con comas.
Preguntas frecuentes
¿La lección «Outline y Box-Shadow» es gratis?
Sí — el texto completo de «Outline y Box-Shadow» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Outline y Box-Shadow»?
Añada contornos de enfoque y efectos de sombra alrededor de los elementos mediante outline y box-shadow. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Outline y Box-Shadow»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Comprender width, height, margin y padding
- Estilos, ancho y color de bordes
- Box-Sizing: Content-Box frente a Border-Box
- Outline y Box-Shadow