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).
-
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
imgelement and applying a box shadow with the following:Our attribute selector is:
box-shadow
And our properties are:x-offset y-offset blur colorAn 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. -
Upload your Stylesheet file to your site using FTP.
If you’re not sure how to do this, click here.
-
Refresh your site.
Click the “Reload” button in your browser.
Now, your images will have beautiful drop shadows.
-
Finito!
Close your laptop. There’s nothing more to do here.
hell ow
Unfortunately every image on your page gets a drop shadow. Not much use.
No, if you go to your CSS file and add a new class it will work. For instance as Zane used just img, you could do something like
#shadows img {
-webkit-box-shadow: 3px 3px 3px #7C7C7C;
box-shadow: 3px 3px 3px #7C7C7C;
}
Then in your HTML find the img tag and add Class=”shadows” to it.
Hi Warprunner,
Where in the html do you put Class=”shadows” ?
My html currently looks like:
Thank you in advance
You place the class specification within the tag.
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.
just put
-webkit-box-shadow: none; box-shadow: none
for those class that you don’t want to shadow to be appear like Logo, widget etc..
is there a way to disable it for only the logo image?
I have this problem too and how to fix it is go to your logo css class example mine is
#logo img { display: block; max-width: 100%; }
then you have to put the same code in this tutorial but change to “none” instead.
so it would be something like this :
#logo img { display: block; max-width: 100%; -webkit-box-shadow: none; box-shadow: none}
More experiment with CSS image shadow
http://www.corelangs.com/css/box/image-shadow.html
css
If the image has rounded corners, the shadow appears with a square corner.
Thank you! Worked great!
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.)
Thank you very much.
Emily