The next method we’ll explore to create a curved, “lifted” shadow for an HTML element uses a PhotoShop-generated image applied with CSS. Our goal during this process is to keep the shadow as small, light, and responsive as possible. This article covers the creation of the image; a subsequent lesson with address the CSS to apply it.
Step 1: Create the shape
Start up Adobe PhotoShop (I’m using CS6) and create a canvas and shape approximately the size of the element you are going to apply the shadow effect to on your web page. Leave some space below the shape for the drop shadow.
In this case, I’ve used a rectangle with rounded corners that is the same dimension as the <article> elements on my web page (the height and color of the rectangle don’t matter, as we are only interested in its shadow.)
Step 2: Create the shadow
Use PhotoShop’s DropShadow filter to create the shadow for the shape. Note that, unlike the CSS method I explained earlier in this series, PhotoShop’s Spread function won’t take negative values, so the generated shadow will always be at least as large as the original shape. As you will see, that won’t matter in the long term.
Set the shadow to below the shape and inset slightly on one side, and tweak the settings until they are to your satisfaction. Remember to set the opacity to 30% or less; you can see the settings I used to the right. After getting the shadow just right you might want to set a guide to the middle of the original shape: that will become handy in step 4.
Step 3: Divorce the shadow from the shape
We have to work directly on the shadow; PhotoShop won’t let us do that with it still applied as an effect. Right-click on the effect and choose Create Layer. This will separate the shadow out as a new layer. (PhotoShop will protest that some aspects of the effect can’t be reproduced in the new layer. You can ignore the warning; just press OK. Nothing about the shadow will change.)
Step 4. Curve Half The Shadow
We’re only interested in the very bottom edge of the shadow on the left hand side. Turn off the shape and the background layer and select a little less than half the shadow’s width with the recatangular marquee tool.
Right click on the selection and choose Layer Via Copy. Turn off the layer underneath, and then choose Edit / Transform / Warp from the menu.
Use the control points to warp the shadow into an appropriate curve. The right wide of the shadow should be higher than the left. You might want to start with the “rise” preset, then customize the curve to something like the result shown on the left. Accept the changes by clicking the tick icon at the top of PhotoShop’s menu bar.
(You could choose to curve the both sides of the shadow and export its entire width if you were developing a fixed-width design in your web page).
Step 5. Export The Shadow
Select the result and export it as a 24-bit PNG with transparency. The addition of transparency, in the form of an alpha mask, will allow the shadow to be used against any background color on our web page.