JobHub.ru — система автоматизации и управления бизнесом

Тень у блоков посредством css

Тень у блоков посредством css

В css3 есть замечательное свойство box-shadow, но его не поддерживает Internet Explorer. Но как всегда для IE есть волшебный костыль

По-умолчанию тень у блоков прописывается следующим образом

.class {
	-moz-box-shadow: 2px 2px 3px #969696;
	-webkit-box-shadow: 2px 2px 3px #969696;
	box-shadow: 2px 2px 3px #969696;
}

где:
- 2px размер тени по горизонтали
- 2px размер тени по вертикали
- 3px радиус размытия
- #969696 цвет тени

Теперь, чтобы заработало и в IE (начиная с 6 версии), в стили дописываем следующее

.class {
	-moz-box-shadow: 2px 2px 3px #969696;
	-webkit-box-shadow: 2px 2px 3px #969696;
	box-shadow: 2px 2px 3px #969696;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Небольшой пример использования свойства box-shadow

тень у блока

Комментарии

|
5 Май 2010 в 17:29

css3 супер штука предлагают срочно внедртить во всех браузерах и у всех пользователей в принудительном порядке ))

ОтветитьОтветить
|
5 Май 2010 в 18:01

главное что в ИЕ работает. Хоть его и ругают, но для такого древнего браузера как 6 осел такие эффекты просто супер

ОтветитьОтветить
Антон
|
26 Сентябрь 2010 в 22:50

СПАСИБО БОЛЬШОЕ!
ОЧ КРУТО!

ОтветитьОтветить
|
16 Октябрь 2010 в 21:31

Спасибо,не знал такой способ для IE.

ОтветитьОтветить
|
16 Октябрь 2010 в 21:33

p.s исправьте: в первом поле не имя а комментарий.

ОтветитьОтветить
|
26 Ноябрь 2010 в 22:17

О, круто! И не надо картинки использовать.

ОтветитьОтветить
Анастасия
|
3 Апрель 2011 в 21:05

а у меня почему-то нигде, кроме Оперы не пашет((( проверяла в IE8 и Firefox

ОтветитьОтветить
|
4 Апрель 2011 в 7:29

Анастасия, рекомендую попробовать
http://makexhtml.ru/2010/krossbrauzernyj-box-shadow-border-radius-i-linear-gradient/

ОтветитьОтветить
Анастасия
|
4 Апрель 2011 в 23:29

mdss, спасибо огромное!!!! теперь все везде работает…правда, Мозилла что-то выпендривается…но буду искать решение дальше!

ОтветитьОтветить
|
11 Октябрь 2011 в 18:11

Спасибо большое!

ОтветитьОтветить
|
24 Ноябрь 2011 в 1:36

Спасибо за пример.

Кстати классный дизайн у блога.

ОтветитьОтветить

Оставить комментарий

Разрешенные теги: a (href, title), b, i, strike.


Ваше имя *

E-mail (не публикуется) *

Адрес блога

Комментарий *