Резиновый блок со скруглёнными углами, градиентом и тенью

Блок со скруглёнными углами, градиентом и тенью Ещё не так давно это была настоящая головная боль верстальщика. Теперь это решаемо одним тегом: HTML
<div class="gray-block">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
CSS
.gray-block{
	border: 1px solid #CBD3DB;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-image: -webkit-gradient(linear,left top, left bottom,from(#EEF2F5),to(#CBD3DB));
	background-image: -webkit-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: -moz-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: -o-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: linear-gradient(top,#EEF2F5,#CBD3DB);
	-moz-box-shadow: 4px 4px 10px #838383;
	-webkit-box-shadow: 4px 4px 10px #838383;
	box-shadow: 4px 4px 10px #838383;
}
Как видно из приведённого кода, всё это будет замечательно работать везде, кроме Internet Explorer. Шестую версию этого браузера поддерживает только убогий, а для последующих версий есть совершенно замечательная библиотека на JavaScript - PIE.js Имея на борту проекта jQuery, подключаем плагин для браузеров Internet Explorer через пока ещё работающие условные комментарии:
<!--[if IE]><script type="text/javascript" src="../js/PIE.js"></script>	<![endif]-->
И, после загрузки документа, указываем ему необходимые идентификаторы тегов:
/*<![CDATA[*/
(function($){
if ($.browser.msie) {
	$('.gray-block').each(function() {
		PIE.attach(this);
	});	
}
}(jQuery));
/*]]>*/
После этого в Internet Explorer появятся скруглённые уголки и тени. Градиенты появляются если добавить в CSS-код правило:
	-pie-background: linear-gradient(top,#EEF2F5,#CBD3DB);
Пример. Дополнение #1: следует обратить внимание, что при этом методе вёрстки блоков в ИЕ будут проблемы при изменении свойства display с block на none и обратно. Поэтому применение этого способа не оправданно для скрывающихся блоков. Дополнение #2: PIE рисует тени, созданием заблюреной подложки под целевым блоком. Поэтому не подходит для блоков с полупрозрачным фоном.

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