Как сделать тень блока в CSS

Привет, всем! Тень в дизайне сайтов применяется постоянно, используется она в различных элементах: блоках, картинках или тексте.  Чтобы верстальщику реализовать задумку дизайнера, нужно хорошо знать свойство тени CSS box-shadow.

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

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

Можно, конечно, воспользоваться генераторами теней, но если ваша задача – изучать CSS, то не поленитесь для начала проделать всё вручную, написать параметры самостоятельно, разобраться в них, а уже потом генерировать со знанием дела 🙂

Пример записи тени в CSS

Тень отменяется: box-shadow: none;

Полупрозрачная тень: box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.15);

Тень внутри элемента: box-shadow: inset 0px 5px 5px 2px #ccc;

Значения box-shadow

none – без тени

inset — тень внутри элемента

0px – сдвиг по оси X — cмещение тени по горизонтали относительно элемента. Положительное значение параметра задаёт сдвиг тени вправо, отрицательное — влево. 

5px — сдвиг по оси Y — cмещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. 

15px – размытие — задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.

2px – растяжение — положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.

rgba(0, 0, 0, 0.15) – цвет тени  в любом CSS формате. Здесь я указала черный цвет и прозрачность 0,15%. Можно и так задать цвет тени: #ccc.

При использовании свойства box-shadow допускается задавать несколько теней, разделяя параметры через запятую. Тогда учитывайте, что при наложении первая тень в списке окажется  выше, а последняя — ниже.

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

Пример тени №1

Вариант небольшой полупрозрачной тени, которая исчезает при наведении курсора:

Пример тени №2

Этот вариант с большой тенью — для наглядности, она также плавно пропадает при hover (наведении курсора).

Особенно часто тень используется для отображения карточек товаров, анонсов статей — небольших блоков. При наведении курсора на такие блоки, появляется небольшая тень, визуально приподнимающая блок — создаётся красивый эффект.

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

Пожалуй, в одной из следующих статей покажу варианты теней специально для кнопок. Ещё дам ссылки на генераторы теней — удобные инструменты, они существенно облегчают жизнь верстальщикам и всем любителям теней.

На этом пока всё! Терпения вам, упорства и успех непременно придёт 🙂