Css тень блока

Целью урока является показать ещё один атрибут «каскадных таблиц стилей» (CSS), с помощью которого обычному элементу можно придать особенный вид.

Этот атрибут – bоx- shadow:

Данный атрибут добавляет тень к элементу и причём теней может быть несколько (они перечисляются через запятую).

Существует два вида записи:

Первый – сдвиг по X, сдвиг по Y, радиус тени, rgb-цвет, степень размытия (от 0.1 до 1);

RGB-цвет расшифровывается, как Red Green Blue, если вы воспользуетесь генератором html-цветов, то заметите, что помимо html-кода цвета есть ещё и три строчки с теми названиями, в каждой из них число. Код сгенерированного цвета записывают в виде трёх чисел через запятую.

Ниже представлен пример, наглядно демонстрирующий, выше описанное – квадратный блок с тенью слева. Теню будет иметь чёрный цвет ( rgba(0,0,0,… );

Пример:

Тень слева

Код:

Как видно из примера – тень смещена на 4 пикселя влево и 2 пикселя вниз и хоть цвет тени чёрный, но из-за того что степень размытия 0.5 цвет тени размытого серого цвета.

Второй способ задания тени – сдвиг по X, сдвиг по Y, размытие, радиус, цвет.

Для примера сделаем блок, у которого тень будет справа.

Блок:

Тень справа

Код:

Актуально обратить внимание на то, что тень можно задать и тексту. Ниже показан блок с текстом внутри него и тексту заданы некоторые параметры тени (1-ым способом). У блока закруглённые углы и тень, заданная для него, автоматически «закругляется.»

Блок:

Тень вокруг блока и у текста

Код:

Теперь будет продемонстрировано то, что можно задать сразу несколько теней. В этом примере их будет две и, причём, одна из теней задана внутри блока (inset) светло-зелёного цвета.

Пример:

Тень внутри блока и под ним

Код:

Блок похож на объёмную фигуру.

Ну и напоследок зададим последнему блоку ещё пару теней.

Код:

Тень внутри блока, снизу, сверху и вокруг него

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

Для добавления тени используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

Здесь:

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

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

В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5CSS3IE 9+CrOpSaFx

Результат данного примера показан на рис. 2.

Тень повторяет скругление уголков блока.

Рис. 2. Вид тени на фоновом рисунке

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

Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.

Рис. 3. Блок с тенью

В примере 2 показано создание такого блока.

Пример 2. Блок с тенью

HTML5CSS3IE 9+CrOpSaFx

Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow. В примере 3 показано добавление двойной тени ко всем изображениям.

Пример 2. Блок с тенью

HTML5CSS3IE 9+CrOpSaFx

Результат данного примера показан на рис. 4.

Рис. 4. Изображение с двойной тенью

Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px).

Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.

Столкнулся с интересным примером или задачей — не знаю, как сказать.

Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить — с помощью или .

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя — повторение мать учения, как говорится.

Данную задачу можно решить двумя способами.

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

Первый способ — это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут — не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

И результат работы этого кода:

Все хорошо — просто и работает. Единственный минус — нарушение семантики HTML-кода. Ведь, чтобы добавить для картинки всего лишь тень, потребовалось создать лишний HTML-элемент, тем самым засоряя документ.

Второй способ — более правильный с точки зрения семантики. Чтобы “набросить” тень на изображение, нужно поместить его в блок в качестве фонового изображения.

В остальном все остается точно таким же, как и в первом примере. Также создается внутренняя тень для блока, но при этом нет необходимости “опускать” картинку с помощью z-index.

Код второго способа показан ниже:

Картинка — результат работы этого кода:

Код более краткий. Единственный минус — изображение должно быть только в качестве фона для блока.

На этом все.


cssbox-shadow

Свойство CSS box-shadow позволяет задать тень элементу html. Используется дизайнерами сайтов довольно часто, чтобы как-то украсить и выделить рамки с текстом, изображения, сделать более читабельным контент.


Синтаксис CSS box-shadow

… box-shadow: X Y R1 R2 color [inset]; …


Где:

  • X — смещение по оси Х (горизонтали)
  • Y — смещение по оси У (вертикали)
  • R1 — размытие (чем больше значение, тем плавне переход)
  • R2 — радиус растяжения (если положительный, то растягивает, отрицательный — сжимает)
  • color — цвет (можно задавать в любом формате: #RGB, название цвета)
  • inset — при наличии этого значения тень будет располагаться внутри блока (элемента)

Пример 1. HTML рамка с тенью box-shadow без смещения

Ниже представлен самый простой вариант использования тени свойством CSS box-shadow на странице html, когда она равномерно обтекает всю рамку без смещений.

<html> <head> <style> .primer1{ padding: 10px;margin: 10px;width: 200px;height: 100px;box-shadow: 0px 0px 15px 5px#a34b23; } </style> </head> <body> <divclass=»primer1″>Пример №1. Рамка с тенью</div> </body> </html>

На странице преобразуется в следующее



Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

<html> <head> <style> .primer2{ padding: 10px;margin: 10px;width: 200px;height: 100px;box-shadow: 1px 1px 2px 3px#a34b23; } </style> </head> <body> <divclass=»primer2″>Пример №2.

Рамка со смещенной тенью</div> </body> </html>

На странице преобразуется в следующее


Пример №3. Свечение рамки html

Реализация тени в виде свечения

<html> <head> <style> .primer3{ padding: 10px;margin: 10px;width: 200px;height: 100px;box-shadow: 0px 0px 20px#b04b66; } </style> </head> <body> <divclass=»primer3″>Пример №3. Свечение</div> </body> </html>

На странице преобразуется в следующее


Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset.

<html> <head> <style> .primer4{ padding: 10px;margin: 10px;width: 200px;height: 100px;box-shadow: 0px 0px 20px#b04b66 inset; } </style> </head> <body> <divclass=»primer4″>Пример №4. Внутреннее свечение</div> </body> </html>

На странице преобразуется в следующее



Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты.

Например, можно сделать разноцветную рамку в стиле 3D.

<html> <head> <style> .primer5{ padding: 10px;margin: 10px;width: 200px;height: 100px;box-shadow: 0px 0px 15px 3px#0f0 inset, 5px 5px 10px#00f, -5px -5px 10px#f00; } </style> </head> <body> <divclass=»primer5″>Пример №5. Совмещение теней</div> </body> </html>

На странице преобразуется в следующее


Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

  • -webkit-box-shadow — для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
  • -moz-box-shadow — для Firefox до версии 4.0

Читайте также:
• Как сделать треугольник через CSS
• Свойство display
• Свойство text-shadow
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• font-weight
• Свойство overflow
• Свойство position relative
• Вендорные префиксы CSS

← Перейти в каталог CSS уроков

Пример №2.

Рамка со смещенной тенью

Пример №4. Внутреннее свечение
Пример №5. Совмещение теней

Сегодня мы узнаем как сделать CSS тени без картинок. После изучения этого урока вам уже не понадобится CSS генератор тени.

В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow. Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before, которые поместим за основным объектом (div с классом block).

Взгляните на HTML код, для которого мы будем создавать CSS3 тень:

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

Приподнятые уголки

Смотреть пример.

Завитки на уголках

Смотреть пример.

Перспектива

С помощью тени можно придать блоку перспективу. Смотреть пример.

Приподнятый бокс

CSS тень у проподнятого блока. Смотреть пример.

Один вертикальный изгиб

Пример CSS3 тени для вертикально согнутого блока. Смотреть пример.

Два вертикальных изгиба

Смотреть пример.

Один горизонтальный изгиб

Пример CSS3 тени для горизонтально согнутого блока. Смотреть пример.

Два горизонтальных изгиба

Смотреть пример.

Повернутый блок

CSS3 тень для повернутого блока. Смотреть пример.

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

Закрыть меню