Saltar al contenido principal
Codigo Heroe
Tarea anterior
Sombras de caja14/15
A la lista de tareas
  1. 1. La propiedad box-shadow
  2. 2. Desplazamiento horizontal de la sombra
  3. 3. Desplazamiento vertical de la sombra
  4. 4. Desenfoque de la sombra
  5. 5. Expansión de la sombra
  6. 6. Desenfoque + expansión
  7. 7. Color de la sombra
  8. 8. Sombra interior
  9. 9. Sombra semitransparente
  10. 10. Sombra en un solo lado
  11. 11. Sombras múltiples
  12. 12. Varios bordes en un mismo elemento
  13. 13. Arte con sombras — 1
  14. 14. Arte con sombras — 2
  15. 15. Arte con sombras — 3
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Arte con sombras — 2

Ya creamos la base de un anillo con sombras interiores.

En este ejercicio la completaremos con algunas sombras más. También serán interiores.

La idea es sencilla: cada vez agregamos una sombra más estrecha al principio de la lista, que cubre en parte las sombras de abajo. Usamos sombras interiores porque no salen de los límites del elemento.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Arte con sombras — 2</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="circle"></div> </body> </html>
CSS
body { padding: 20px; background-color: white; } .circle { margin: 10px auto; width: 100px; height: 100px; border-radius: 50%; box-shadow: inset -5px -5px 5px 3px white, inset 0 0 0 9px #6c6d70, inset 0 0 0 10px black; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Agrega otras tres sombras interiores. Agrega cada nueva sombra al principio de la lista. En las dos primeras sombras nuevas, ambos desplazamientos deben ser 0.

    1. Expansión de 5px, color black, interior.
    2. Expansión de 4px, color #4f5054, interior.
    3. Ambos desplazamientos de 2px, desenfoque de 2px, color white, interior.
    Codigo Heroe

    © 2023-2026, codigoheroe.com