Today's Question:  What does your personal desk look like?        GIVE A SHOUT

CSS Box Shadow Illustration

  Code Snippets        2011-06-30 04:03:38       6,368        0    

Used in casting shadows off block-level elements (like divs).

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}
  1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  3. The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  4. Color

Example

Inner Shadow

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

Example

Internet Explorer Box Shadow

You need extra elements...

<div class="shadow1">
	<div class="content">
		Box-shadowed element
	</div>
</div>
.shadow1 {
	margin: 40px;
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}
.shadow1 .content {
	position: relative; /* This protects the inner element from being blurred */
	padding: 100px;
	background-color: #DDD;
}

Source : http://css-tricks.com/snippets/css/css-box-shadow/

APPLE  CSS  BOX SHADOW  CHROME  SAFARI  IE  IL 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.