вторник, 12 апреля 2011 г.

Блоки с тенью с помощью 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>
 


Комментариев нет: