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:

1. 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.

2. 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).

3. Insert the code snippet.

   img {
       -webkit-box-shadow: 3px 3px 3px #7C7C7C;
       box-shadow: 3px 3px 3px #7C7C7C;
       }

   Copy the above code and paste it into your stylesheet. In this snippet we are targeting the img element and applying a box shadow with the following:

   Our attribute selector  is:  box-shadow
   And our properties are:  x-offset y-offset blur color

   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.

4. Upload your Stylesheet file to your site using FTP.

   If you’re not sure how to do this, click here.

5. Refresh your site.

   Click the “Reload” button in your browser.

   Now, your images will have beautiful drop shadows.

6. Finito!

   Close your laptop. There’s nothing more to do here.