Блоки с тенью с помощью CSS3

CSS3 Box-Shadow: CSS-3 Box-Shadow

Начиная с 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>

Блоки с тенью с помощью CSS3

Добавить комментарий