Что CSS грядущий нам готовит? Часть вторая: box-shadow

В первой части мы рассмотрели создание закруглённых углов с помощью свойства border-radius.

Сегодня мы рассмотрим свойство box-shadow, которое позволяет создавать тень вокруг блока.
Как и предыдущее свойство, его поддерживают далеко не все браузеры, но если вам нужен лишь декоративный эффект с минимальным использованием css, то box-shadow нет равных.
В данный момент box-shadow поддерживает Firefox (начиная с версии 3.5), Safari (начиная с версии 3.0), Opera (начиная с версии 10.50) и Chrome.
Даже Internet Explorer в какой-то мере поддерживает создание теней, начиная с версии 5.5. И, судя по виду, алгоритм построения тени не менялся с момента выпуска этой версии (IE 5.5 вышел почти 10 лет назад) – такой жуткой реализации я не встречала.

Примеры

Перейдем к примерам.

Самый простой вариант - тень без размытия. Только этот пример IE отображает так же, как все остальные браузеры.	.block { box-shadow:#a3a3a3 8px 8px; -moz-box-shadow:#a3a3a3 8px 8px; -webkit-box-shadow:#a3a3a3 8px 8px; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=8, OffY=8,Color='#a3a3a3', Positive='true') }
Сначала передаём цвет тени, затем смещение относительно блока (8 пикселей вправо и 8 вниз) и радиус размытия тени (15 px).	.block { box-shadow:#a3a3a3 8px 8px 15px; -moz-box-shadow:#a3a3a3 8px 8px 15px; -webkit-box-shadow:#a3a3a3 8px 8px 15px; }
Показываем тень слева-сверху.	.block { box-shadow:#a3a3a3 -8px -8px 15px; -moz-box-shadow:#a3a3a3 -8px -8px 15px; -webkit-box-shadow:#a3a3a3 -8px -8px 15px; }
Равномерный контур тени по всему блоку.	.block { box-shadow:#a3a3a3 0 0 15px; -moz-box-shadow:#a3a3a3 0 0 15px; -webkit-box-shadow:#a3a3a3 0 0 15px; }
Тень внутри блока. Это свойство поддерживает только Firefox, Chrome и Opera 10.50.	.block { box-shadow:inset #a3a3a3 0 0 15px; -moz-box-shadow:inset #a3a3a3 0 0 15px; -webkit-box-shadow:inset #a3a3a3 0 0 15px; }
Последний параметр (5px) - расширение тени во все стороны. Это свойство поддерживают только вышеприведённые браузеры.	.block { box-shadow:inset #a3a3a3 0 0 15px 5px; -moz-box-shadow:inset #a3a3a3 0 0 15px 5px; -webkit-box-shadow:inset #a3a3a3 0 0 15px 5px; }
Отрицательное значение сужает тень, создавая интересный эффект.	.block { box-shadow:#a3a3a3 0 0 40px -15px; -moz-box-shadow:#a3a3a3 0 0 40px -15px; -webkit-box-shadow:#a3a3a3 0 0 40px -15px; }

Вот ещё пример того, что можно сделать, используя box-shadow.
Его увидят только те, кто использует Firefox, Chrome или Оперу 10.50:

.block {
	background-color:#1e97f0;
	box-shadow:inset #fff 0 0 10px 40px;
	-moz-box-shadow:inset #fff 0 0 10px 40px;
	-webkit-box-shadow:inset #fff 0 0 10px 40px;
}

Создаём градиенты

Кто сказал, что градиенты можно создавать только в Фотошопе?

.block  {
	background-color:#1e97f0;
	box-shadow:inset #f9fcff 0 190px 100px -100px,inset #095084 0 -190px 100px -100px;
	-moz-box-shadow:inset #f9fcff 0 190px 100px -100px,inset #095084 0 -190px 100px -100px;
	-webkit-box-shadow:inset #f9fcff 0 190px 100px -100px,inset #095084 0 -190px 100px -100px;
}

Здесь мы используем две тени – более светлую для верхней части и более тёмную для нижней.

Ещё один пример:

.block  {
	height:270px;
	box-shadow:inset #ff0404 0 50px 50px -30px,
		inset #ff9b04 0 150px 50px -80px,
		inset #fff904 0 250px 70px -130px,
		inset #05fe1e 0 320px 70px -180px,
		inset #04f2ff 0 450px 70px -230px,
		inset #0404ff 0 550px 70px -280px,
		inset #e604ff 0 650px 70px -330px;

	-moz-box-shadow:inset #ff0404 0 50px 50px -30px,
		inset #ff9b04 0 150px 50px -80px,
		inset #fff904 0 250px 70px -130px,
		inset #05fe1e 0 320px 70px -180px,
		inset #04f2ff 0 450px 70px -230px,
		inset #0404ff 0 550px 70px -280px,
		inset #e604ff 0 650px 70px -330px;

	-webkit-shadow:inset #ff0404 0 50px 50px -30px,
		inset #ff9b04 0 150px 50px -80px,
		inset #fff904 0 250px 70px -130px,
		inset #05fe1e 0 320px 70px -180px,
		inset #04f2ff 0 450px 70px -230px,
		inset #0404ff 0 550px 70px -280px,
		inset #e604ff 0 650px 70px -330px;
}

Лучше не спрашивайте, как это сделано :)

Приведённые выше примеры не работают в Safari, IE и Опере версии ниже 10.50.

Итог

Уже сейчас возможности box-shadow впечатляют.
Осталось лишь дождаться времени, когда все браузеры будут поддерживать его в полной мере.

P. S. Пока искала информацию по box-shadow, нашла свойство, предназначенное именно для создания градиентов - gradient. Его мы и рассмотрим в следующей статье.

Если кому-то вдруг стало интересно, как IE решил проблему отображения теней - зайдите на эту страницу и поиграйте с настройками. Разумеется, заходить нужно с IE.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты