CSS Shadow Effects

I recently uploaded an image gallery to my Google App Engine. I experimented with CSS shadow effects.

Here is the orginal image

I added some shadow into the picture to make look like it’s a photo

The complete css looks like this:


.imgClip
{
   background:#FFFFFF none repeat scroll 0 0;
   border:1px solid #CCCCCC;
   margin:0 19px 19px 0;
   padding:2px 2px 8px;

   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   -moz-box-shadow:0pt 0pt 5px rgba(0,0,0,0.5);
}

background:#FFFFFF none repeat scroll 0 0;
padding:2px 2px 8px;

background: #FFFFFF‘ controls the background color. The padding control the width of the area of the background color.

This is what it look like when I change the background color to ‘red’ and widen the padding to 10 pixel:

background:#FF0000 none repeat scroll 0 0;
padding: 10px;

-moz-box-shadow control the shadow that appears behind the image.

-moz-box-shadow:0pt 0pt 5px rgba(0,0,0,0.5);

The first 2 value, 0pt and 0pt determines the horizontal and vertical distance. The 3rd value 0, determines the blurriness of the shadow. The rgba combination determines the color of the shadow This is what shadow looks like when I change it to blue.

-moz-box-shadow:10pt 5pt 30px rgba(0,0,255,0.5);

References:
1. HTML Colors
2. Mozilla Box Shadow
3. Image is from StudioMakgill

Advertisements

About zainul franciscus

Hi, I am a software developer and tech blogger who is currently living in Wellington, New Zealand. I write stuff that I find interesting on
This entry was posted in nu-lightbox, programming, web development and tagged , . Bookmark the permalink.

One Response to CSS Shadow Effects

  1. Arema says:

    shadow effect is only for CSS3 compliant browsers eh?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s