Download
Downloaded 80,155 times
Today’s freebie is a simple set of 3 content box shadows. When used correctly, shadows can add a bit of flair to an otherwise boring container.
So content box shadows are nothing new, in fact they’re pretty popular right now. My thoughts? I like them as long as they’re subtle enough to enhance an element rather than be the focal point. These bad boys should give you a good starting point when creating your own. Click the image above to view all three.
I don’t really think the middle one works but the other two look great. Matt Hamm did a similar effect with CSS, http://www.matthamm.com/notebook/?p=7.
The middle one could probably do with an ever so slightly curved bottom edge on the box, I’ll leave that for others to play with. Matt did a great job with the CSS versions, I checked them out a while ago.
Hey Orman,
How exactly did you achieve this simple effect from the start? I’ve been thinking of the best ways to do it but I wanted to know how you push those premium pixels ;)
I created a black rectangle, applied a gaussian blur, warped it into shape, lowered the opacity and applied a foreground to transparent gradient over the top.
Alrighty! That’s close to how I’ve been doing it, never thought about warping though. :) Gives more precision, I like it. :)
Wow I didn’t realize you refreshed the look of the site so quickly. Overall I like it, I don’t think its perfect but its definitely in the right direction.
Anywho about the shadows – the center one does need fixing. I think the overall look your going for is a center bend, which would require the shadow is thicken in the center and be more dominant then on the edges – opposite of the first. Right? Or am I completely wrong? Haha.
Hmmm I think I’ll have to disagree with the shadows being darker in the middle, at the edges where the box is closer to the surface, the shadow would be more intense. A bit of warping makes all the difference – http://cl.ly/5nrV
Same effect can be done using brush stroke with “simulate brush pressure”
The middle one does a good job at suggesting that the box is translucent: the middle of the box appears to be bowed upward from the background, allowing light to penetrate and illuminate whatever is underneath.
Nice share, thanks!
Wow! Love the new site re-design. Love that “Love it” too.
Orman, You’re awesome. Greatings from Latvia :)
Very nice….these are a MUST have for any project. Thanks man!
Thanks for sharing man. Really appreciated what you’ve created :) they are all nice and beautifully crafted :)
Orman,
how do you add the noise to the background? Is it a pattern with a specific size?
I convert the shape to a smart object, add noise by going to Filter > Noise, then reduce the opacity on that noise by clicking the filter options (the two upward arrows looking icon) for the layer in the layers palette – http://cl.ly/5rp9
i effing love your site redesign. i’ve said it before, but well done. not a detail forgotten.
Amazing, i was looking for it,
But how could i make the boxes bigger vertically & horizontally, without breaking the effects, border etc, because i needed to use the boxes for slider.
Many thanks!
I think this one does more justice (http://nicolasgallagher.com/css-drop-shadows-without-images/demo/)
Exactly what I was looking for. This will add some flair to my magazine theme. Thanks.
just the kind of boxes I was looking for. now i need to figure out the css. Thanks so much again!
dude this is a great resource for people starting out with designing websites. you’ve been a great inspiration. thanks
Thank you for the resources, I am starting out in this field and it is really helpful.