Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
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.
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.
