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

Блок со скруглёнными углами, градиентом и тенью

Ещё не так давно это была настоящая головная боль верстальщика. Теперь это решаемо одним тегом:

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 рисует тени, созданием заблюреной подложки под целевым блоком. Поэтому не подходит для блоков с полупрозрачным фоном.