Teoría
Teoría

Arte con sombras — 3

Ya terminamos los preparativos para crear nuestra imagen.

Tenemos una clase que dibuja un anillo con sombras. El código inicial también incluye los elementos y estilos necesarios para colocar los anillos donde queremos.

Solo falta agregar la clase a cuatro elementos para completar la imagen. Recuerda que las clases de un elemento se separan con espacios:

<div class="one two">

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Arte con sombras — 3</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="logo"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </div> </body> </html>

CSS

body { padding: 20px; background-color: white; } .logo { margin: 50px auto; width: 280px; } .logo div { position: absolute; } .logo .c1 { margin-left: 0; } .logo .c2 { margin-left: 60px; } .logo .c3 { margin-left: 120px; } .logo .c4 { margin-left: 180px; } .circle { margin: 10px auto; width: 100px; height: 100px; border-radius: 50%; box-shadow: inset 2px 2px 2px 0 white, inset 0 0 0 4px #4f5054, inset 0 0 0 5px black, inset -5px -5px 5px 3px white, inset 0 0 0 9px #6c6d70, inset 0 0 0 10px black; }

ObjetivosRealizado

Agrega la clase circle a los elementos con las clases:

c1,
c2,
c3,
c4.