GetHow

Your How to Guide

  • Business
  • Career & Education
  • Entertainment
  • Health & Fitness
  • Internet
  • Technology
  • Tutorials

How to Give Drop Shadow Behind Images Using CSS

April 7, 2013 by Atul Kumar Pandey

CSS (Cascading Style Sheet) allows us to do various adjustments in HTML. Here I am going to explain you how to give a drop shadow effect behind the images using simple CSS syntax. Just adding a little shadow behind images can rock the looks of your layout of site and really this is a best method of encouraging users to focus on site images.

Drop Shadow

Suppose your site have several images and all the images have single property of CSS then you can try the code given below. This will add a clear drop shadow at every single sides of the image.

.images {

-webkit-box-shadow: 0px 0px 8px 2px;

-moz-box-shadow: 0px 0px 8px 2px;

box-shadow: 0px 0px 8px 2px;

}

Here first two PX defines the shadow range horizontally and vertically where other two PX defines the shadow blur and show depth.

[ 0px opx 8px 2px = (Horizontal) (Vertical) (Blur) (Depth)  ]

If you want a specific color of shadow then you can also add colors to this shadow by adding a HEX Color code in front of all the syntaxes. Here for demonstration I am using Green (#008800) Hex code.

.images {

-webkit-box-shadow: 0px 0px 8px 2px #008800;

-moz-box-shadow: 0px 0px 8px 2px #008800;

box-shadow: 0px 0px 8px 2px #008800;

}

By this way you can apply a drop shadow behind any images that you want using this simple CSS code. This will not only gives a better looks but also attacks the visitors to look at you images.

Filed Under: Tutorials

About Atul Kumar Pandey

I'm Atul Kumar Pandey, a full time blogger at GetHow by passion and founder of this blog by profession. I write what makes me feel worthy enough to share.

Comments

  1. Pavan Somu says

    April 11, 2013 at 11:02 AM

    Its not working

    • Atul Kumar Pandey says

      April 11, 2013 at 1:02 PM

      In order to make your images get this shadow you need to first specify the image’s tag.

Business News

Low Interest Personal Loans

Low Interest Personal Loans: Are They Really Advantageous?

Trade Barriers

Trade Barriers

SEO vs SEM

Why SEO and SEM are Important to Grow Your Business?

Financial Freedom

Personal Priorities: How a Finance Degree Can Help You to Become a Master of Your Own Money?

Heath and Fitness

Tips for Taking Better Care of Your Hair

KENT Alps Air Purifier

What Makes KENT Alps Air Purifier a Great Gifting Option?

Runner

Gaining Health by Losing Weight: Fitness Professionals’ Recipes to Help You Achieve It

Folic Acid

Why is it Important to Take Folic Acid

About Us | Advertise | Affiliate Disclosure | Privacy Policy | Write for Us


Handcrafted with by Atul

Powered by GetHow