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

11–20 of 60 posts

Re: Better Box Shadows (CSS)

#11

Post by chrismorgan »

zzo38computer wrote: post #5
deefour wrote: post #3

Your website is gorgeous.

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 it as right as possible for Fastmail’s webmail, but I don’t think I’ve ever encountered any other site using an inner scrolling area even trying to get it right.

As it is, keyboard users will have to press Tab seven times before the keyboard navigation keys (arrows, Space, Shift+Space, Page Up, Page Down, Home, End) work.

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.

Re: Better Box Shadows (CSS)

#12

Post by notatoad »

goblin89 wrote: post #4

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.

>Currently shadows tend to be more pronounced in Firefox relative to WebKit.

yeah, last i looked at this, negative spread was essentially useless for anything but the most subtle tweak because it looked so different in firefox and chrome.

Re: Better Box Shadows (CSS)

#13

Post by chipotle_coyote »

Tagbert wrote: post #8
zzo38computer wrote: post #5

Earlier 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.

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 onto the scene, and as far as I know it's always had bigger-than-default body text that's near-black on a pure white background. WordPress's default theme going back at least to 2016 is the same way; ditto for Ghost; ditto for virtually every theme from Squarespace.

Again, I'm sure there are lots of sites still out there like this, but I just don't see them very often. My eyesight isn't top-notch anymore, but 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.)

Re: Better Box Shadows (CSS)

#18

Post by giantDinosaur »

zzo38computer wrote: post #5
deefour wrote: post #3

Your website is gorgeous.

I disagree. It uses too large fonts, too large boxes, to narrow areas, etc.

I spent a couple of minutes staring at it, unsure if I liked it or not. I concluded that the retro styling is kinda cool, but they make me expect a text adventure or puzzle. Nice for a change. :)

Re: Better Box Shadows (CSS)

#19

Post by grenoire »

iainmerrick wrote: post #16
sfvisser wrote: post #14

A 'realistic' drop shadow can never be smaller than the occluding object itself.

It can appear that way if the light source is large, or there are multiple light sources. Then what you mostly see is a faint penumbra rather than a dark shadow (the umbra).

True, this is looking like a studio light setup to me, and it's rather pleasing (albeit not making much sense.)
Post reply on HN