Начиная с Firefox 3.1 (beta) и Safari 3.1.2. CSS3 поддерживают стили оформления блоков тенями.
css-selector { boxShadow : xOffset yOffset blurRadius shadowColor }
К сожалению Internet Explorer(7-8) на поддерживает данную функциональность, но есть способ и в ИЕ применить такие же эффекты через CSS Filter Blur плагина jQuery = jquery.boxshadow.js.
$(css-selector).boxShadow( xOffset, yOffset, blurRadius, shadowColor );
Примечание: JavaScript требует чтобы родительский элемент имел атрибут "relative".
jquery.boxshadow.js
Пример
CSS:
.cblock {
width:1000px; height: 100%; background:none; margin-top: 20px; position: relative;
box-shadow: 9px 9px 5px #111;
-o-box-shadow: 9px 9px 5px #111;
-moz-box-shadow: 9px 9px 5px #111;
-webkit-box-shadow: 9px 9px 5px #111;
}
HTML
<script type="text/javascript" src="jquery.boxshadow.js"></script>
<style type="text/css" media="screen">
@import url(style.css );
</style>
<script type="text/javascript">
$(document).ready(function(){
if ($.browser.msie) {
$('.cblock').boxShadow( 9, 9, 5, "#111");
}
});
</script>
