: How to get arced drop shadows with center glow effect in Photoshop? I was just browsing the plugins.joshlobe.com and the thing that caught my eye was interesting use of drop shadows. I am talking

@Welton168

I can't help you with the css, but as for the images themselves I would recommend using a set like this:
creativemarket.com/Rhett/18-Shadows-for-images-and-sliders
or this:
www.pixeden.com/psd-web-elements/web-slider-psd-shadows-pack
The first package is only , 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.

Vote Up Vote Down

@Sarah814

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.

Vote Up Vote Down