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/

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

Задача: вывести записи с сортировкой по дате указанной в произвольном поле плагина ACF.

10.02.2017

В интернете 21 века уже стало трудно встретить сайт, в дизайне которого все шрифты стандартные. Применение нестандартных шрифтов супер модное нынче явление.

17.11.2014

Углы любого элемента на странице можно закруглить, благодаря добавлению в CSS свойства border-radius. Чтобы облегчить процесс подбирания необходимого угла закругления элементов предлагаю вам пользоваться предложенным сервисом.

13.11.2014

Задача с виду очень простая, но я покажу как отобразить только подкатегории и подстраницы родительского пункта без использования стандартного меню. В некоторых проектах – это просто необходимо.

17.11.2014

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

06.11.2014