

Realistic CSS3 Box Shadow trick with generated content - some1else
http://www.ballyhooblog.com/realistic-css3-box-shadows/

======
cuchoperl
Why there's a white shadow on top of the black one? Doesn't look natural.

~~~
flyosity
The lighting is incorrect. The shadow makes it look like the post-it note is
actually just a ring of paper. A real shadow wouldn't just magically turn
white/transparent as it gets further in from the edge, especially since the
part that looks odd is tucked under the paper, and, in the physical world,
would be darker since it's more hidden from the light source.

I wrote a blog entry a few months ago on how to achieve realism with respect
to digital light sources, maybe it'll help someone out:
[http://flyosity.com/tutorial/crafting-subtle-realistic-
user-...](http://flyosity.com/tutorial/crafting-subtle-realistic-user-
interfaces.php)

~~~
some1else
You're correct. However, I think the described technique with generated
content and transforms of multiple box shadows can be used to achieve
realistic simulations of lighting, like the kinds in your blog post.

The author's idea of realistic lighting effects indeed doesn't take into
account the perspective of the curl on the note, and therefore looks a bit
unnatural.

P.s.: Great post.

~~~
sudont
Agreed. It’s one of the simplest guides to adding subtle texture to widgets
out there, with the added bonus of being concise.

------
albertzeyer
I prefer the "boring" shadows. They look cleaner.

~~~
nborgo
Someone posted another way to do this the other day: <http://matthamm.com/box-
shadow-curl.html> (<http://news.ycombinator.com/item?id=1988977>)

It looks much nicer. Plus, calling the curl effect "realistic" is quite the
exaggeration.

~~~
akamaka
Please don't use this version of the effect. I've seen in on a couple of
websites, and it seriously pains me to see it.

Because the "page" doesn't actually "curl", it looks more like background has
been pushed down in places.

~~~
sudont
I’m guessing they used it on a large element. Something like this is
definitely meant for a sub-300px element, where the eye would get tricked into
thinking there was a page curl.

------
benradler
That's a janky lookin shadow my friend!

------
some1else
And CSS Transforms :-)

