31–40 of 60 posts
The blur filter is notoriously slow on performance. I find it interesting that the author didn't explore the "spread" parameter of box-shadow at all, I wonder if they realize it exists https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
I am curious: Do you have some numbers? What is this statement based on? Intuitively I'd agree, but on a technical level I am not so sure.
Pure CSS box shadows without extra markup can be achieved with using negative spread (with increased blur to compensate) and multiple shadows. I believe it allows to achieve the exact look the author demonstrates at the end. What I'd like to see is browser engines converge on identical box shadow rendering. Currently shadows tend to be more pronounced in Firefox relative to WebKit.
What I would prefer to see is user settings for box shadow rendering, so that the user can configure how much pronounced it is or to disable it entirely, with presets for imitating Firefox and for imitating WebKit.
Your website is gorgeous.
Earlier quoted context omitted.
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.
Also, please nobody actually use this on a site I might visit - using all this processing power to make a drop shadow marginally better/worse is one of the many reasons we can't have nice things.
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.
Broken on my browser - the bottom box doesn't display a drop-shadow at all. (Chromium/Linux) Also, please nobody actually use this on a site I might visit - using all this processing power to make a drop shadow marginally better/worse is one of the many reasons we can't have nice things.
Hard to force others to not use it, but you can override those declarations in your browser's user style sheet so it will not render them (that's what user styles are for).
`, :before, *:after { box-shadow: none !important; }` in real user style sheet, i.e. in Firefox profile in chrome sub-folder and `toolkit.legacyUserProfileCustomizations.stylesheets` turned on should do the trick. Or -- with boosted selector specificity -- you can use some userstyle manager extension (like Stylus) to do the same.
Earlier quoted context omitted.
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.
You're absolutely correct. Once I get a little time I will update the post with those details (and be sure to link you credit for giving me a heads up)
The blur filter is notoriously slow on performance. I find it interesting that the author didn't explore the "spread" parameter of box-shadow at all, I wonder if they realize it exists https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow