Theory
Theory
Comments

Stretching the Shadow

The fourth digital value sets a stretch for the shadow.

box-shadow:
[inset] — internal
5px     — x-offset
10px    — y-offset
[2px]   — feathering
[3px]   <— stretch
[red];   — color

By default, the size and shape of the shadow are the same as the element to which the shadow belongs. But the size of the shadow can be resized by stretching.

If the stretch is zero (or unspecified), the size of the shadow is the same as that of the element. A positive stretch makes the shadow larger than the element’s dimensions, and a negative stretch makes it smaller.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Stretching the Shadow</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn" type="button">Button</button> </body> </html>

CSS

body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 100px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; box-shadow: 0 0 0 0 #34495e; color: white; text-align: center; text-transform: uppercase; font: inherit; }

Goalscompleted

Give the original shadow a stretch of 5px.
And then decrease it to 70px.
Then assign a stretch of -5px.

Stretching the Shadow

Comments

Log in

Sign up

Restore access