Как создать падающую тень с помощью CSS

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

Давайте подробнее рассмотрим CSS. тень имущество.

Что такое CSS drop-shadow?

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

Синтаксис:
фильтр: падающая тень (смещение-x, смещение-y, радиус размытия, цвет);

Есть широкий выбор функции фильтра включая размытие (), яркость (), а также падающая тень ().

offset-x определяет горизонтальное расстояние и offset-y определяет расстояние по вертикали. Обратите внимание, что отрицательные значения помещают тень слева (offset-x) и выше (offset-y) объект.

Последние два параметра необязательны. Вы можете указать радиус размытия тени как длину. По умолчанию установлено значение 0. У вас не может быть отрицательного радиуса размытия.

Цвет тени задается как. Если вы не указали цвет, он соответствует значению цвет имущество.

Когда полезно использовать CSS drop-shadow?

Вы, возможно, уже знаете, что тень коробки делает свою работу очень хорошо. Итак, вы можете подумать, зачем нам тень вообще? Есть множество случаев, когда падающая тень () функция - палочка-выручалочка. Давайте посмотрим на некоторые из них:

Непрямоугольные формы

В отличие от тень коробки, вы можете добавить тень на непрямоугольные формы. Например, у нас есть прозрачный SVG или PNG с непрямоугольной формой - например, звезда. Здесь добавление тени, соответствующей самому объекту, может быть выполнено либо с помощью тень коробки или тень. Рассмотрим оба сценария:

HTML

CSS

.star-img img {
дисплей: встроенный блок;
высота: 15em;
ширина: 25em;
}
.box-shadow {
красный цвет;
box-shadow: 0.60em 0.60em 0.2em;
}
.drop-shadow {
фильтр: drop-shadow (0.60em 0.60em 0.2em);
}

Выход:

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

Ограничивающими факторами являются то, что падающая тень () функция принимает все параметры типа кроме вставка ключевое слово и распространять параметр.

Сгруппированные элементы

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

HTML

Живи настоящим моментом

Lorem ipsum dolor sit amet conctetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Моди, коррумпти коммоди quisquam ex numquam incidunt.

Базовый CSS

тело {
заполнение: 5em 1em;
семейство шрифтов: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
«Lucida Sans Unicode», Женева, Вердана, без засечек;
}
h2 {
размер шрифта: 2rem;
}
п {
размер шрифта: 0.8rem;
}
.parent-container {
дисплей: гибкий;
flex-direction: столбец;
высота: 17бэр;
ширина: 50em;
}
.image-container img {
ширина: 15em;
позиция: абсолютная;
z-индекс: 1;
верх: 2em;
слева: 1.5em;
}
.text-container {
цвет: rgb (255, 236, 236);
цвет фона: rgb (141 0 35);
ширина: 30 бэр;
набивка: 3 бэр;
align-self: гибкий конец;
положение: относительное;
}

Теперь примените тень коробки а также тень чтобы увидеть разницу.

.drop-shadow {
фильтр: падающая тень (0,4 бэр 0,4 бэр 0,45 бэр rgba (0, 0, 30, 0,5));
}
.коробка,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0,3);
}

Выход:

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

Обрезанные элементы

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

HTML

CSS

.parent-container {
фильтр: падающая тень (0rem 0rem 1.5rem темно-бордовый);
}
.clipped-element {
ширина: 50em;
высота: 50мм;
маржа: 0 авто;
background-image: url (улыбается-девушка.jpg);
клип-путь: круг (50%);
размер фона: обложка;
фон-повтор: без повторения;
}

Выход:

Мы обрезали 50% изображения по круговой траектории. Следовательно фильтр падающей тени применяется только к видимой части изображения. Разве это не круто?

Ограничения и различия

Как мы обсуждали выше, тень не поддерживает распространять параметр. Это означает, что создать эффект контура с помощью падающая тень () функция, потому что ее убивают повсюду. Кроме того, он отображает различные эффекты тени от тень коробки а также текстовая тень (с такими же параметрами). Вы можете почувствовать, что различия между тень коробки а также тень сводиться к Модель коробки CSS. Один следует за ним, а другой нет. Вот пример:

HTML

Каждая статья MUO сделает вас на шаг ближе.


Каждая статья MUO сделает вас на шаг ближе.



Каждая статья MUO сделает вас на шаг ближе.

Базовый CSS

тело {
заполнение: 5em 1em;
семейство шрифтов: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
«Lucida Sans Unicode», Женева, Вердана, без засечек;
}
.parent-container {
ширина: 72 бэр;
}
п {
размер шрифта: 3em;
стиль шрифта: полужирный;
}

Применение теневых эффектов

.drop-shadow {
фильтр: падающая тень (0.5em 0.5em 0.1em # 555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em # 555;
}
.text-shadow {
тень текста: 0.5em 0.5em 0.1em # 555;
}

Выход:

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

Поддержка браузера

В падающая тень () Функция поддерживается во всех современных браузерах, кроме старых браузеров, таких как Internet Explorer. Хотя это не является чем-то, что могло бы серьезно помешать UX, вы можете добавить запрос функции с тень коробки отступать.

Экспериментируйте с различными эффектами теней

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

Псевдоклассы добавляют совершенно новый набор функций к CSS и вашему личному репертуару веб-разработки. Узнайте о них больше, чтобы стать более опытным и эффективным веб-разработчиком.

Как использовать CSS box-shadow: 13 хитростей и примеров

Блестящие коробки выглядят скучно. Украсьте их с помощью эффекта тени блока CSS!

Читать далее

Об авторе