Как сделать тень в css для div

CSS ( box-shadow ) тень блока ( div )

тень блокаЧтобы применить к блоку трёхмерный эффект для увеличения его видимости и объёма, к нему применяют css свойство box-shadow , и тем самым получают красивую тень, которая и придаёт блоку изящный результат.

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

Как и писал выше, чтобы применить к блоку тень необходимо воспользоваться свойством box-shadow .

Рассмотрим, какие значения в css для тени могут использоваться в параметре box-shadow .

значения css для box-shadow

Описание значений для тени

  • 1 — это значение сдвигает тень по горизонтали ( положительное: вправо, отрицательное: влево );
  • 2 — это значение сдвигает тень по вертикали ( положительное: вниз, отрицательное: вверх );
  • 3 — это значение для размытия тени ( 0: резкая тень );
  • 4 — это значение растягивает тень ( положительное: растяжение, отрицательное: сжатие );
  • 5 — это значение для цвета тени;
  • 6 inset — говорит браузеру о том, что тень будет внутри блока, без этой записи тень будет автоматом снаружи объекта.

Обязательными значениями для тени являются 1 и 2 , и если прописать только их, то оставшиеся будут принимать значения по умолчанию 0 и цвет тени при этом будет чёрным.

Чтобы получить полупрозрачную тень блока, можно также использовать формат RGBA , при котором ваша тень станет ещё более изощрённой.

Таких значений в одном параметре для тени можно писать сколько угодно, и при грамотном подходе в css , ваш блок будет смотреться очень изумительно.
Давайте рассмотрим блоки с тенью на примерах ( во всех примерах имеется исходных код для каждого блока ):

CSS тень у блоков

На этой странице описаны способы, позволяющие создать CSS тень у блоков или других элементов HTML-страницы. Вообще обычно тени задают именно блокам, причем это не обязательно блочные элементы по типу, это могут быть и встроенные (уровня строки), но расширенные с помощью внутренних отступов. В CSS 3 уже появились свойства для создания теней без изображений, но так как старые браузеры их не понимают, то здесь будут рассмотрены и варианты использующие картинки.

Тень с помощью CSS 3, без изображений

В этом примере используются возможности CSS 3, которые с легкостью позволяют создавать тени у элементов без изображений.

Пример HTML и CSS: создание теней с помощью CSS 3

Описание примера

  1. Чтобы сделать у блока тень, применяем к нему свойство CSS box-shadow. Но это свойство понимают не все (особенно старые) браузеры, поэтому для некоторых из них были добавлены свойства с приставками -moz- (Firefox) и -webkit- (Chrome и Safari), которые ввелись разработчиками еще до поддержки стандартного свойства. Однако они не проходят валидацию. Обратите внимание, что свойства с приставками стоят в коде выше основного, это было сделано для того, чтобы браузеры понимающие оба варианта, использовали последний (в соответствии с приоритетом стилей CSS).
  2. Для версий IE 8 и ниже используем специальный фильтр Shadow , которым Microsoft снабдила свои браузеры, где color — цвет тени, Direction — направление тени, Strength — ее размах. Так как в нашем примере тень от элемента расходится во все четыре стороны, причем внизу и справа она больше, то фильтр приходится указывать тоже четыре раза — для верхней и правой стороны, для правой и нижней, для нижней и левой, для левой и верхней. Так тени наложатся друг на дружку и сольются в единую картину. Кстати цвет для фильтра пришлось подбирать вручную, чтобы тень стала похожа на ту, которая создается свойствами CSS.
  3. Фильтры не проходят валидацию и нужны только для IE, поэтому закрываем их в условные комментарии. Будет лучше, если их вообще вынести в отдельный CSS-файл и подключить как внешние стили.
  4. Для корректной работы для совсем старых IE добавляем невалидное свойство zoom :1, которое понимают только они и которое заставляет отображаться блок в натуральный размер, и включает так называемый layout.

Минус данного примера в том, что тень блока в старых IE будет выглядеть не совсем так, как в других браузерах. Кроме этого фильтры могут «тормозить» работу браузеров IE.

Тень с помощью CSS 3, без изображений (вариант 2)

В этом примере мы сделаем более реалистичную тень для старых браузеров IE. Для этого добавим в основной блок еще два — блок с основным содержимым и блок специально для создания тени в IE, который закроем в условные комментарии. Затем с помощью абсолютного позиционирования мы положим его под блок с контентом и добавим специальный фильтр. Этот фильтр не просто добавит тень, он превратит в нее весь блок, но так как он будет лежать внизу, выглядывая только по краям, то и получится нужный нам эффект.

Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 2)

Описание примера

  1. Добавляем внутрь основного элемента два блока — "cont_block" и "shadow_block" (блок-тень), где второй закрываем в условные комментарии, чтобы его увидели только IE8 и младше.
  2. Задаем основному блоку "block" относительное позиционирование (CSS position:relative), так как позиционировать блок-тень будем относительно него, а самому "shadow_block"  — абсолютное.
  3. C помощью свойств CSS width и height растягиваем блок-тень во всю ширину и высоту родителя. Также добавляем ему отрицательное значение z-index, чтобы «положить» его под блок с контентом.
  4. Применяем к блоку-тени фильтр Blur , где PixelRadius — радиус размытия тени, MakeShadow — указывает, что блок будет тенью, а ShadowOpacity — уровень прозрачности тени, который изменяется от 1 до 0. Важно! Параметр PixelRadius не просто размывает тень по краям, он еще и увеличивает размеры блока, у нас это увеличение составило по 5px с каждой стороны.
  5. Чтобы тень стала видна слева и сверху от "cont_block" , применяем к блоку-тени отрицательные значения свойств CSS left и top. Но это еще не все. В нашем примере снизу и справа тень имеет больший размер, чтобы этого добиться, добавляем блоку-тени нижний и правый внутренний отступ (CSS padding), расширяя его. Все, готово.
  6. Изменяя параметры из четвертого и пятого пунктов, вы можете сделать другие варианты тени.
  7. Для IE6 здесь было использовано несколько хаков, чтобы и в нем все правильно работало. Не забывайте, что вместо них, вы всегда можете вынести эти свойства в отдельный файл и подключить его с условными комментариями.

Тень с помощью CSS 3, без изображений (вариант 3)

По своей сути этот пример похож на предыдущий, однако здесь немного поменяется структура CSS, что положительно отразится на удобстве применения способа. Правда из-за этого придется пожертвовать поддержкой IE6.

Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 3)

Описание примера

  1. Как я говорил, этот пример похож на предыдущий, но здесь мы избавились от использования свойства CSS float в основном блоке, которое часто не нужно. И еще — ширина и высота теперь регулируется разными блоками.

В IE6 этот пример работает некорректно, поэтому все свойства и хаки предназначенные для него были убраны. Кроме этого были изменены условные комментарии — теперь их понимают только IE7 и IE8.

CSS тень с помощью изображений

В этом примере мы будем создавать тень с помощью изображений. Для этого сначала нам придется нарисовать нужную тень в графическом редакторе, а потом вырезать ее по кусочкам. Затем мы обернем контент в несколько блоков, где каждому в качестве фона зададим один из вырезанных кусочков тени. В итоге у нас получится «резиновый» блок с тенью, который будет одинаково выглядеть во всех браузерах.

Делаем заготовки для тени.

CSS тень с помощью изображений

Обратите внимание, что кусочек правого нижнего угла ( rb ) при вырезании захватит часть самого блока. Поэтому после вырезания мы удаляем внутреннюю часть и делаем ее прозрачной (это позволяет формат PNG).

Пример HTML и CSS: тени с использованием изображений

Описание примера

  1. По правилам HTML, если элементы вложены друг в друга, то те, которые находятся внутри, будут располагаться поверх тех, которые находятся снаружи. Это же относится и к фону элементов.
  2. Для самых внешних блоков нашего примера ( "rc" и "cb" ) указываем фон с помощью свойства CSS background. Причем у "rc" позиционируем фон к правой стороне блока и разрешаем ему размножение только по вертикали, а у "cb"  — к нижней стороне с размножением только по горизонтали. В итоге получаем две полоски тени, которые находятся справа и снизу от контента. Но по углам эта тень выглядит совсем не так, как нам надо, особенно в правом нижнем углу, где полоски накладываются друг на дружку. Идем дальше.
  3. Внутрь внешних блоков помещаем еще три ( "lb" , "rb" и "rt" ), каждому из которых фоном задаем по одному уголку тени. Позиционируем фоновые изображения в нужные углы блоков и запрещаем им размножение (no-repeat). В результате эти фоновые кусочки частично накрыли в нужных нам местах фоновые полоски, которые были созданы ранее. Все, вот теперь тень готова.
  4. По умолчанию блоки растягиваются во всю ширину родителя, поэтому для ее регулировки будем использовать самый внешний элемент ( "cb" ), применив к нему свойство CSS width с нужным значением. У него же указываем фоновый цвет (если указать цвет фона у другого блока, то он перекроет часть тени).
  5. Высоту (если нужно) и внутренние отступы наоборот задаем самому внутреннему элементу ( "rt" ). Особенно здесь важно указать нижний и правый отступ, чтобы контент не наложился на тень.
  6. Чтобы в IE6 и IE7 все отображалось, как положено, прописываем для них свойство zoom :1. Свойство отсутствует в спецификации CSS.

Таким образом можно создать тень не только с двух сторон, но и, например, с четырех, правда понадобится больше оберточных блоков, что и является основным минусом данного способа.

Внутренние тени в CSS Внутренние тени в CSS

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

Конструкция box-shadow содержит несколько различных значений:

Horizontal offset и vertical offset — горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

Край тени просто размывается. При различном значении spread radius видим следующее:

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius, то они будут равны 0.

text-shadow

Синтаксис очень похож на box-shadow:

Значения аналогичные, только нет spread-shadow. Пример использования:

Inset в box-shadow

Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

Изображения с тенями

Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div. Для начала вот обычный код картинки:

Логично предположить, что добавить тень можно так:

Но тень не видно:

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый — это обернуть картинку в обычный div:

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ — это установить изображение фоном нужного блока:

Вот, что может получится при использовании внутренних теней:

Inset в text-shadow

Для реализации внутренней тени текста простое добавление в код inset не работает:

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

Вот, что получается:

Добавляем секретный ингредиент background-clip, который обрезает все, что выходит за пределы текста (на темный фон):

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *