smashercosmo 28 мая 2010 в 12:52

Кроссбраузерный box-shadow

2 мин

66K

CSS*

+33

Комментарии 41

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 13:08

Ой, не тот файл залил. Сейчас исправлю.

smashercosmo 28 мая 2010 в 13:14

Исправил

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 13:21

Обновил статью с учётом твоих комментариев

Sabiko 2 окт 2010 в 00:16

IE выключает сглаживание текста внутри блока с фильтрами
Ещё он не хочет нормально применять некоторые другие свои фильтры. И восьмёрка ломает спрайты — у неё background-position перестает работать. И начинаются хитрые косяки с отступами (в текстовых инпутах особенно прелестно). Если между блоком с тенью и внутренними с текстом-фильтрами-спрайтами есть хотя бы одна обёртка, то всё это лечится через position:relative на неё.

Вообще, если я ничего не путаю, это старая фишка, что-то такое было при эксплореровской модификации скроллбаров, кажется. Или в блоках с полупрозрачными пнг в шестёрке? Короче, и косяк, и лекарство стары, как сами иешные фильтры. _{жаль, что я про него забыла и в случае с тенью недавно пришлось придумывать эту очевидную вещь заново. битых полчаса, чёрт.}

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 13:16

Это я тоже много раз видел. А вот тень, обрамляющую контейнер по всему контуру — ни разу.

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 13:28

В начале статьи я написал, что способ очень простой и очевидный. Но нигде я подобной реализации не нашёл. Если вы уже давно это применяете — вы молодец.

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 13:40

Ну да на какие-то 11 месяцев опоздал :)

homm 28 мая 2010 в 13:11

У вас точно с кодом все в порядке?

	<!--[if IE]>
	<style type="text/css">
		filter: progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=45, Strength=6)
				progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=135, Strength=6)
				progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=225, Strength=6)
				progid:DXImageTransform.Microsoft.Shadow(color='#042b47', Direction=315, Strength=6);
		position: relative;
		top: -12px;
		left: -12px;
		zoom: 1;
	</style>
	<![endif]-->

Селектор для ИЕ не нужен, сразу свойства?

smashercosmo 28 мая 2010 в 13:13

Всё, всё… исправил

waitekk 28 мая 2010 в 13:44

а если таких блоков на странице будет, скажем, десяток? тормозить будет?

smashercosmo 28 мая 2010 в 13:48

Я думаю, что будет! Хотя надо тестить конечно. AlphaImageLoader для png обычно многократно используется на странице. И ничего, вроде не сильно грузит страницу.
Я думаю, что этот способ хорошо применять, когда есть тень вокруг всего контента страницы. А для галереи с картинками не стоит.

tsmar 28 мая 2010 в 14:15

будет конечно, это же IE

а по делу — все что имеет opacity отличный от 1 в IE добавляет тормозов

Isis 28 мая 2010 в 13:51

Благодаря вам узнал о данном свойстве, спасибо =)

НЛО прилетело и опубликовало эту надпись здесь

smashercosmo 28 мая 2010 в 14:04

Потому что в опере box-shadow поддерживается, начиная с версии 10.50

НЛО прилетело и опубликовало эту надпись здесь

simpel 28 мая 2010 в 14:51

Решал задачу с тенью в IE. Итог — если применять фильтры на блоки больших размеров (центральная колонка с контентом сайта имеет тень) — ужасные тормоза. Применение фильтра к тонким блокам (10px в ширину) решает проблему тормозов но не полностью.

smashercosmo 28 мая 2010 в 15:02

Фигово. Я как раз хотел этот способ использовать для тени вокруг всего контента сайта.

Olegbl4 28 мая 2010 в 16:23

> IE выключает сглаживание текста внутри блока с фильтрами
IE7 maybe

zayceslav 28 мая 2010 в 17:13

Напишите какой-нибудь текст в блок, чтоб посмотреть что значит «IE выключает сглаживание».

smashercosmo 28 мая 2010 в 17:43

Обновил пример

piumosso 28 мая 2010 в 17:59

Вообще-то согласно концепции graceful degradation для ие не надо делать тени.
Как минимум из-за того. что это будет сильно сказываться на производительности

mdss 28 мая 2010 в 23:04

заказчики и дизайнеры в курсе?

Aux 28 мая 2010 в 20:42

А почему не VML?

Andrewus 28 мая 2010 в 23:56

Спасибо, интересное решение!
Я раньше пользовался решением Чикуёнка, но там «резиновость» блока лишь условная.

maxic 29 мая 2010 в 09:43

Я бы не сказал что использование хака — это кроссбраузерный вариант.
Лучше в описании сразу указывать, что использовался хак,

НЛО прилетело и опубликовало эту надпись здесь

Glook 24 июн 2010 в 19:52

«IE увеличивает размеры блока на ширину тени»
Я понимаю, что «ослика» теперь не пинает только ленивый, но Firefox и Opera тоже увеличивают ширину блока.

smashercosmo 25 июн 2010 в 19:52

Это вы с чего взяли?

Glook 25 июн 2010 в 22:35

ну…
на вашем же примере:
уберите отступы у body;
увеличьте ширину блока до 1000 пикселей;
переключите расширение вашего монитора на 1024 на 768;
… наблюдайте полосу прокрутки, которой, по идее, не должно быть.

увеличивайте размытие тени блока для усиления эффекта и доказательства моих слов

smashercosmo 26 июн 2010 в 01:27

Хм… да, действительно, у body появляется прокрутка. Но насколько я понял, это единственный побочный эффект. Во всем остальном блок с тенью в FF и Opera ничем по поведению не отличается от других блоков. Просто в IE блок реально «смещается» на величину тени, так что приходится перемещать его обратно.