Theory
Theory
Comments

Shadow Art - 2

So, we have started creating a circle using inner shadows.

In this step, we will complete the circle by adding some more shadows. By the way, they will also be inner shadows.

The method for creating our circle is simple. Each time we add an increasingly narrow shadow to the beginning of the list of shadows, where it will partially overlap the underlying shadows. We chose to create inner shadows because they do not go beyond the boundaries of the element.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shadow Art – 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; }

Goalscompleted

Add three more inner shadows. For each new shadow, add it to the beginning of the list of shadows.

Stretch of 5px, color: black, inner.
Stretch of 4px, color: #4f5054, inner.
Both offsets of 2px, feathering of 2px, color: white, inner.

Shadow Art - 2

Comments

Log in

Sign up

Restore access