premium WordPress photography themes

Creating Image Shadows Using CSS3

One of my personal favorite features in css3 is the use of box-shadows.

CSS (Cascading Style Sheets) is a style sheet language used to describe the look and formatting of your website. With a few quick lines in your style sheet document, we can create nice drop shadows for our html elements, like on the image above. Here’s your step-by-step guide:

Back ‘Er up.

Hold up! Before making any changes to your site, remember to back up your site. We know it’s a pain. Go on, do it anyway. Try using one of these handy plugins to automate the process.

Open your Stylesheet file within your code editor.

Your Stylesheet is usually named, “style.css.” If you’re not sure how to do this, click here (we recommend Editing Files Offline).

An attribute selector helps you target what you want to change on the image element. The properties are standard pieces of the attribute selector that you can change or style. In this case, you can change the direction of the shadow ( x-offset y-offset), how large the shadow is (blur), and the color of your shadow. Colors are represented by codes in your stylesheet. In this case, we are using the Hex color system.

Actually, in your CSS, a CLASS would be prefixed with “.” and NOT “#”. You use “#” to reference an element’s ID. You also wouldn’t need to reference “img” in the CSS either because the class specification would take care of it.

So the code should look like this instead:

.shadows {

-webkit-box-shadow: 3px 3px 3px #7C7C7C;

box-shadow: 3px 3px 3px #7C7C7C;

}

So anything that has the class “shadows” assigned to it would be affected.

Thank you. This is exactly what I am looking for! Now website have more beautiful img and I don’t have to go back to make a screen capture again to use a shadow effect. Your tutorial save my life. Thank you very much.

Here is how it look like on my website if you want to see how I am so happy about it! http://wpthaiuser.com I also make a tutorial for normal user who want to make website by WordPress too. (I try to guide them without or very less code but now I learn to code too. At least css.)