Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I was just browsing the plugins.joshlobe.com and the thing that caught my eye was interesting use of drop shadows. I am talking about the drop shadow in the linked image with a center glow kind of thing.

enter image description here

Could anybody tell me how to achieve the effect? Is it purely an image effect or can it be produced with a combination of CSS and some image? Any tutorials where I can learn to get this kind of effect would also help.

Your help is appreciated.

dk.

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

I can't help you with the css, but as for the images themselves I would recommend using a set like this:

https://creativemarket.com/Rhett/18-Shadows-for-images-and-sliders

or this:

http://www.pixeden.com/psd-web-elements/web-slider-psd-shadows-pack

The first package is only $4, and I use them all the time. It's a LOT easier than trying to make them from scratch in Photoshop. The url says 18 shadows, but you actually get 26.

The second package only contains 15 shadows, and they do not seem to be as versatile as the shadows in the first package, but they are free.

share|improve this answer
add comment

The shadows on his boxes appear to be a combination of images and CSS. The relevant code from his CSS file is:

.comment, .trackback, .pingback { position:relative;margin-bottom: 30px;padding:15px;border:4px solid #eee;background: #f8f8f8;
    border-color: #ddd #ddd #ccc;
    border-radius: 3px;-border-radius: 3px;-webkit-border-radius: 3px; -moz-border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
 }

.comment:after, .trackback:after, .pingback:after { 
  bottom: -35px;
    content: url("../images/shadow-after.png") !important;
    position: absolute;
    right: 0;
    z-index: 1;
}   
.comment:before, .trackback:before, .pingback:before { 
  bottom: -35px;
    content: url("../images/shadow-before.png") !important;
    position: absolute;
    left: 0;
    z-index: 1;
}

The "center glow" effect is actually the space between the left and right ("before" and "after") shadow PNGs. As far as I know, there's no way to apply non-uniform shadows in straight CSS.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.