Box-shadow или тень при помощи CSS

Применение этой методики в интернете можно встретить очень часто. Методика создания теней для блоков при помощи CSS имеет как много плюсов, так и недостатков. Мы рассмотрим более 12 вариантов реализаций теней при помощи параметра box-shadow.

Для начала я просто обязан сказать о недостатках — это кроссбраузерность.
CSS параметр box-shadow поддерживают следующие браузеры:
IE 9+, Firefox 4.0+, Opera 10.5+, Safari 3.0+, Chrome 1.0+

Теперь соответственно о плюсах:

  • Любой блок можно без труда быстро обрамить css тенью, настроить цвет тени и ее отступы от блока.
  • Тень может быть как внешняя, так и внутренняя.
  • С любой из четырех сторон блока можно использовать любой цвет тени, соответственно большая гибкость реализации.
  • Весьма небольшой объем встраиваемого кода, также можно применить тень для конкретного браузера отдельно.

Сервис генерации кода – http://css3gen.com/box-shadow/

Другие публикации