Saltar al contenido principal
Codigo Heroe
Desafío anterior
Box Shadow: Organic Forms6/16
Ver desafíos del nivel
  1. 1. Propiedad de sombra I
  2. 2. Propiedad de sombra II
  3. 3. Valor mínimo de sombra I
  4. 4. Valor mínimo de sombra II
  5. 5. Desplazamientos de sombra I
  6. 6. Desplazamientos de sombra II
  7. 7. Color de la sombra I
  8. 8. Color de la sombra II
  9. 9. Radio de desenfoque I
  10. 10. Radio de desenfoque II
  11. 11. Radio de expansión I
  12. 12. Radio de expansión II
  13. 13. Sombra interna I
  14. 14. Sombra interna II
  15. 15. Lista de sombras I
  16. 16. Lista de sombras II
Siguiente desafío
  • Skill Atlas

Cargando…
Estará listo en unos segundos.

  • Desafío

Desplazamientos de sombra II

Replica el ejemplo modificando el código
DificultadMedia
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desafío</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-6.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="stage badges"> <span class="badge">New</span> <span class="badge">Pro</span> </div> </body> </html>
CSS
.badge { box-shadow: 10px 0 #cbb5ff; } /* Cambia solo los dos desplazamientos de la sombra para que quede como en el modelo. Valores posibles: 22px -24px 8px 30px El color de la sombra ya está definido. */
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.
    Codigo Heroe

    © 2023-2026, codigoheroe.com