HOW - Pure CSS - cyanHarlow

box-shadow

developer.mozilla.org/en-US/docs/Web/CSS/box-shadow[1]

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

Layering multiple box-shadows is one of the best ways to add depth. Box-shadows will adhere to the edge of the html container and will even follow a path altered by border-radius.The parameters are as such:

border-radius: [X axis], [Y axis], [blur radius], [spread outward or inward];

box-shadow: -15px -15px 5px -10px blue, 6px -11px 20px 1px red, inset 5px 5px 35px 10px green;

And remember - order matters! From left to right = top to bottom.

See what PureCSS Francine looks like without box-shadow [2]
keywords cyanharlow, diana, css, art, how

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Linx
Search Linx by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam
Random CSS Property

counter-increment

The counter-increment CSS property increases or decreases the value of a CSS counter by a given value.
counter-increment css reference