Theory
Theory
Comments

Shadow Art – 1

The most interesting application of shadows is in drawing. Craftsmen can create complex images using shadows. We will also create a fairly simply, but recognizable image in pure CSS.

The source code already contains a placeholder – a rounded element that is 100 by 100 pixels in size without borders and background. The shadows are the same size and shape as their parent element, so the shadows we add will be circular.

Before starting, here are a couple of notes:

If you do not specify a shadow parameter, then it will be equal to 0 by default.
You do not have to specify all of the options for the box-shadow property (prefixed and not). Use the one that works in your browser (server-side validation uses the unprefixed version).

index.html
style.css

HTML

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

Goalscompleted

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

Stretch of 10px, color: black, inner.
Stretch of 9px, color: #6c6d70, inner.
Both offsets of 5px, feathering of 5px, offset of 3px, color: white, inner.

Shadow Art – 1

Comments

Log in

Sign up

Restore access