Layered shadow builder (without blur filter) https://brumm.af/shadows
Very cool!
Better Box Shadows (CSS)
51–60 of 60 posts
Re: Better Box Shadows (CSS)
#52A little off-topic, but this site is close to unusable.
On desktop, I had to set my browser zoom to 75% for it to be legible at all, at which point a new column on the left appeared. I thought I'd accidentally clicked on a link or something.
Then I tried scrolling with my trackpad and it wouldn't, finally figuring out because my cursor was over the left half of the screen, and only the box inside of the right half of the screen scrolls.
The overall visual look is cool, but the usability is terrible. Ironic that the first words on the home page are:
Make a good first impression
Your website might be the first and only interaction with potential customers.
Don’t screw it up.
...overly complex UIs can make for a horrible experience.
You need to treat your users with respect and value their time.Re: Better Box Shadows (CSS)
#53Your website is gorgeous.
I find the text shadows inside the code samples very distracting. Fortunately nothing that a quick trip to the dev tools can't fix.
Re: Better Box Shadows (CSS)
#54A 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!
The only problem with this (and it is infuriating) is that while Chrome and Firefox render box positive box-shadow values identically, they differ substantially with negative values. As a result, to get matching shadows you will need to use browser-specific shadows.
Re: Better Box Shadows (CSS)
#55Earlier quoted context omitted.
With so many sites using tiny, gray fonts on light gray backgrounds, this is surprisingly readable.
This complaint is kind of a trope on Hacker News now -- which isn't to say that there aren't still sites using tiny gray fonts on light gray backgrounds, but off the top of my head I can't think of any sites that launched or were redesigned within the last... five or six years now, at least, that still follow that particular trend. Medium, for both better and worse, has led an awful lot of design since it exploded on…
> the only site that I routinely visit that I have to have set on a higher-than-default zoom to be able to read is (ahem) Hacker News, because it uses tiny black fonts on light gray backgrounds. (Except for the places it uses, uh, tiny gray fonts on light gray backgrounds.)
Your whole comment is spot on, but this is particular funny because I pointed it out to someone the other day and instead of scrolling up to see for himself he just...chose not to believe it. [1]
Re: Better Box Shadows (CSS)
#56A 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
I avoid using this 4th param "spread", as the effect varies wildly between browsers. Safari and Chrome, the two most popular browsers on mobile, are also the two most different, with Firefox and IE/Edge (pre-Chromium) landing in between.
Re: Better Box Shadows (CSS)
#57Earlier quoted context omitted.
I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.
And using an inner scrolling area for the content instead of the document scrolling area is very problematic for keyboard users, unless you focus the true scrollable pane on load, and ensure that any time the body becomes the active element, you change it back to the scrollable pane. This is fiddly to get right, and requires JavaScript; I should finish the blog post I started writing on the topic. I made sure we got…
Yes, I see that too much too, although in this case I just disabled CSS. (In other cases, I sometimes click with the mouse on the area I want to scroll and then use the arrows and page up and page down keys to scroll.)
> For this reason, I strongly recommend that websites (as distinct from web apps) avoid placing article content within a new scrolling area. Use the document scroll area.
I agree with this.
Re: Better Box Shadows (CSS)
#58Earlier quoted context omitted.
I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.
With so many sites using tiny, gray fonts on light gray backgrounds, this is surprisingly readable.
I prefer to just avoid CSS as much as possible. That way, it uses the user's settings in their browser in order to make it readable according to the user's preferences.
Re: Better Box Shadows (CSS)
#59Earlier quoted context omitted.
This complaint is kind of a trope on Hacker News now -- which isn't to say that there aren't still sites using tiny gray fonts on light gray backgrounds, but off the top of my head I can't think of any sites that launched or were redesigned within the last... five or six years now, at least, that still follow that particular trend. Medium, for both better and worse, has led an awful lot of design since it exploded on…
SendGrid's website is entirely unusable without zooming; often the fonts render as less than a pixel wide at normal zoom. Combined with light gray on white color scheme it makes the site a headache to use. More amusing was the advertised blogpost last time I logged in that said using a dark theme for your email promotions was modern and would attract more interaction.
Their front page doesn't look that bad to me, but as I poke through other pages, there's definitely a lot of text at "usually reserved for legal disclaimers" font size, isn't there?
I don't use Sendgrid, so I don't know what their admin panel is like. I recall that some of the worst remaining offenders in the "gray text on gray background" category are SaaS dashboards...
Re: Better Box Shadows (CSS)
#60Earlier quoted context omitted.
With so many sites using tiny, gray fonts on light gray backgrounds, this is surprisingly readable.
I prefer to just avoid CSS as much as possible. That way, it uses the user's settings in their browser in order to make it readable according to the user's preferences.
That's a laudable attitude in general. Problem is, most users are not aware that these preferences exist, nor do they care. Most usecases are covered by Ctrl+Mousewheel.