HOW - Pure CSS - cyanHarlow

Open Link

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
 
Other Items in css
Charts.css HOW - Pure CSS - cyanHarlow
Other Categories in Linx
ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube
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
The happiest People don't have the best of everything, they just make the best of everything.
Unknown
Random CSS Property

scroll-margin-block

The scroll-margin-block shorthand property sets the scroll margins of an element in the block dimension.
scroll-margin-block css reference