Realistic CSS3 Box Shadow trick with generated content
ballyhooblog.com
Realistic CSS3 Box Shadow trick with generated content
1–10 of 13 posts
Re: Realistic CSS3 Box Shadow trick with generated content
#2And CSS Transforms :-)
Re: Realistic CSS3 Box Shadow trick with generated content
#3Why there's a white shadow on top of the black one? Doesn't look natural.
Re: Realistic CSS3 Box Shadow trick with generated content
#4Why there's a white shadow on top of the black one? Doesn't look natural.
I think the reason for this is that when you move an object further away from a surface the shadow becomes less pronounced and more diffuse.
I agree that it doesn't look quite right, though.
Re: Realistic CSS3 Box Shadow trick with generated content
#5I prefer the "boring" shadows. They look cleaner.
Re: Realistic CSS3 Box Shadow trick with generated content
#6Why there's a white shadow on top of the black one? Doesn't look natural.
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-...
Re: Realistic CSS3 Box Shadow trick with generated content
#7Why there's a white shadow on top of the black one? Doesn't look natural.
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…
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.
Re: Realistic CSS3 Box Shadow trick with generated content
#8I prefer the "boring" shadows. They look cleaner.
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.
Re: Realistic CSS3 Box Shadow trick with generated content
#9I prefer the "boring" shadows. They look cleaner.
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.
Great one, quite decent.
Re: Realistic CSS3 Box Shadow trick with generated content
#10I prefer the "boring" shadows. They look cleaner.
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.
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.