Teoría
Teoría

Arte con sombras — 1

Una de las aplicaciones más interesantes de las sombras es dibujar. Hay quienes crean imágenes muy complejas con ellas. Nosotros también crearemos una imagen reconocible, aunque sencilla, usando solo CSS.

El código inicial ya incluye una base: un elemento redondo de 100 por 100 píxeles, sin bordes ni fondo. Las sombras siguen la forma del elemento al que pertenecen, así que las que agreguemos serán redondas.

Antes de empezar, dos observaciones:

Si no se indica el desenfoque o la expansión de una sombra, su valor es 0.
No es necesario escribir todas las variantes de box-shadow, con prefijo y sin él. Usa la que funcione en tu navegador (la comprobación del servidor usa la variante sin prefijo).

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Arte con sombras — 1</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%; }

ObjetivosRealizado

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

Expansión de 10px, color black, interior.
Expansión de 9px, color #6c6d70, interior.
Ambos desplazamientos de -5px, desenfoque de 5px, expansión de 3px, color white, interior.