Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Better Box Shadows (CSS)

uglyduck.ca

Post reply on HN
Print view View original

21–30 of 60 posts

Re: Better Box Shadows (CSS)

#21

Post by speedgoose »

gkoberger wrote: post #7

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.io/gkoberger/pen/rNOommB

You can also apply multiple box-shadow on the same element separated by commas if you want even more control on the shadow.

    box-shadow: 0 18px 16px -15px rgba(0,0,0,0.3), 0 10px 10px -20px rgba(0,0,0,0.8);

Re: Better Box Shadows (CSS)

#24

Post by bradley_taunt »

gkoberger wrote: post #7

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.io/gkoberger/pen/rNOommB

Thanks for sharing! I am aware of the spread property and using it as you have in the demo works well. The main reason I use a separate element most times is for when I want the shadow to render at ~60-70% the width of its parent. Not sure there is a way to do that with box-shadow directly, unless I've overlooked something?

Re: Better Box Shadows (CSS)

#26

Post by huhtenberg »

bradley_taunt wrote: post #24
gkoberger wrote: post #7

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.io/gkoberger/pen/rNOommB

Thanks for sharing! I am aware of the spread property and using it as you have in the demo works well. The main reason I use a separate element most times is for when I want the shadow to render at ~60-70% the width of its parent. Not sure there is a way to do that with box-shadow directly, unless I've overlooked something?

If you were aware of this option, you should've mentioned it in the intro of your post, before getting into a solution for a specific case not covered by it.

Re: Better Box Shadows (CSS)

#28

Post by thomasahle »

gkoberger wrote: post #7

A few people have mentioned that it seems the author didn't realize this is already the 4th parameter in `box-shadow`, so I made a quick demo: https://codepen.io/gkoberger/pen/rNOommB

So you use a negative spread-radius to make the shadow more narrow than the box. Cool!

Re: Better Box Shadows (CSS)

#29

Post by the_other »

To me, the lower contrast of the "better" boxes makes them "worse". My eye keeps trying to find the edge of the box and failing; I begin to wonder why the content is in the box to begin with.
Post reply on HN