{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

CSS box-shadow Property Tutorial

The CSS box-shadow property allows you to attach a drop-shadow to any HTML element.

The demos below are examples of HTML elements each with a drop-shadow.

this element has an outer shadow
this element has an inner shadow

Web Browser Support for the box-shadow Property

Internet Explorer is the only web browser that does not support the box-shadow property.

The Firefox web browser supports the box-shadow property if the prefix "-moz-" is added to the front of the box-shadow property.

The Safari and Chrome web browsers support the box-shadow property if the prefix "-webkit-" is added to the front of the box-shadow property.

box-shadow Property Syntax

selector { box-shadow:[inset(optional)] [value(x-coordinate offset)] [value(y-coordinate offset)] [value(shadow blurriness)] [value(color)]; }

The first values specifies the x-coordinate offset (left or right).

The second value specifies the y-coordinate offset (top or bottom).

The third value is optional, it does not have to be specified. If it is specified, it specifies the level of blurriness of the text shadow. If it is not specified, it is as if the level of bluriness is set to zero.

The fourth value specifies the color of the text shadow.

The "inset" keyword is optional. If it is present, the drop shadow changes from an outer shadow to an inner shadow.

box-shadow Demos and Codes

The code for the demos below are below each demo.

this element has an outer shadow
border:1px solid black; box-shadow:8px 8px 8px grey; -moz-box-shadow:8px 8px 8px grey; -webkit-box-shadow:8px 8px 8px grey;
this element has an inner shadow
border:1px solid black; box-shadow:inset 8px 8px 8px grey; -moz-box-shadow:inset 8px 8px 8px grey; -webkit-box-shadow:inset 8px 8px 8px grey;
the shadow for this element has a blur value of zero
border:1px solid black; box-shadow:8px 8px 0 grey; -moz-box-shadow:8px 8px 0 grey; -webkit-box-shadow:8px 8px 0 grey;

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends