Skip to main content

Posts

Showing posts from March, 2011

CSS Shadows

What up? I have a couple of CSS gems I wanted to share with you. This first one is called a top shadow. Here is the effect: Compare this version to the not so fun version: Here is the code for that little effect: <style type="text/css"> /*TOP SHADOW*/ body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } </style> Another little gem is putting a drop shadow under images. Here is a screenshot within eCollege with two images, one has a drop shadow: If you like that shadow as it is, then use this code: <style type="text/css"> img { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-f