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

[@smashercosmo]

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

[@smashercosmo]

Исправил

[@smashercosmo]

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

[@Sabiko]

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

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

[@smashercosmo]

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

[@smashercosmo]

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

[@smashercosmo]

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

[@homm]

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

	<!--[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]

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

[@waitekk]

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

[@smashercosmo]

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

[@tsmar]

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

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

[@Isis]

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

[@smashercosmo]

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

[@simpel]

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

[@smashercosmo]

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

[@Olegbl4]

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

[@zayceslav]

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

[@smashercosmo]

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

[@piumosso]

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

[@mdss]

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

[@Aux]

А почему не VML?

[@Andrewus]

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

[@maxic]

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

[@Glook]

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

[@smashercosmo]

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

[@Glook]

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

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

[@smashercosmo]

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

[@z0rg]

кроссбраузерный говорите? а опера доказывает обратное
opera 10.10

[@smashercosmo]

Ну да, и FF 2.0 доказывает обратное)) Опера поддерживает свойство box-shadow начиная с версии 10.50

[@mihdan]

Очевидный и простой способ заставляет кушать много ресурсов в ИЕ.
Лучшим решением будет использование VML в этом «браузере»

[@romn]

отнюдь не симпатичная тень в ie, к сожалению