Return to Snippet

Revision: 24261
at February 24, 2010 13:27 by johnloy


Initial Code
/* http://www.neteye.de/articles/box-shadow.html */
.shadow {
	_height: 1px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5,MakeShadow=true,ShadowOpacity=0.5);
	background: #000\9
}

.shadow-content {
	background: #fff;
	position: relative;
	top: 2px;
	left: 2px;
}

div.shadow-content {
	background: #eee;
	padding: 20px;
}

.inline-block {
	line-height: 1px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
}

/*
In order to add a shadow to an arbitrary element, we have to wrap it inside an element with the shadow class and assign the shadow-content class to the element itself:

<div class="shadow">
  <div class="shadow-content">Hello World</div>
</div>
*/

Initial URL
http://www.neteye.de/articles/box-shadow.html

Initial Description


Initial Title
Cross-browser image-less drop-shadow with box shadow

Initial Tags
css

Initial Language
CSS