Как да създадете падаща сянка с CSS

Въпреки че тенденциите в дизайна варират всяка година, можете да разчитате на използването на основни ефекти на сянка като кутия-сянка и падаща сянка да допринесе положително за естетиката на уебсайта. Можеш да използваш падащи сенки за да създадете приятни, красиво изобразени ефекти, без да изглеждате като кисели.

Нека разгледаме по-отблизо CSS падаща сянка Имот.

Какво представлява CSS падаща сянка?

падаща сянка ( ) е CSS ефект, който показва сянка около формата на определен обект. Ето синтаксиса за прилагане на CSS падаща сянка.

Синтаксис:
филтър: падаща сянка (offset-x offset-y blur-radius color);

Има широка гама от филтърни функции включително размазване ( ), яркост ( ), и падаща сянка ( ).

изместване-x определя хоризонталното разстояние и офсет-y определя вертикалното разстояние. Имайте предвид, че отрицателните стойности поставят сянката вляво (изместване-x) и отгоре (офсет-y) предметът.

Последните два параметъра не са задължителни. Можете да посочите радиуса на размазване на сянката като дължина. По подразбиране е настроен на 0. Не можете да имате отрицателен радиус на размазване.

Цветът на сянката е посочен като. Ако не сте посочили цвят, той следва стойността на цвят Имот.

Кога е полезна CSS падащата сянка?

Може би вече знаете това кутия-сянка върши работата доста добре. Така че, може да си помислите, защо имаме нужда падаща сянка изобщо? Има много случаи, когато падаща сянка ( ) функцията е спасител. Нека да разгледаме няколко от тях:

Неправоъгълни форми

За разлика от а кутия-сянка, можете да добавите a падаща сянка до неправоъгълни форми. Например, имаме прозрачен SVG или PNG с неправоъгълна форма - например звезда. Тук добавянето на сянка, която съответства на самия обект, може да бъде завършена с едно от двете кутия-сянка или падаща сянка. Помислете за двата сценария:

HTML

CSS

.star-img img {
дисплей: inline-block;
височина: 15em;
ширина: 25em;
}
.box-shadow {
цвят: червен;
кутия-сянка: 0.60em 0.60em 0.2em;
}
.drop-shadow {
филтър: падаща сянка (0.60em 0.60em 0.2em);
}

Изход:

Когато се сравняват двата ефекта, става ясно, че a кутия-сянка дава правоъгълна сянка; също така няма значение дали изображението е прозрачно или вече има фон. От друга страна, падаща сянка ви позволява да създадете сянка, която съответства на формата на самото изображение.

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

Групирани елементи

Има няколко случая, когато може да се наложи да изградите компоненти чрез припокриване на определени елементи. Ако използвате кутия-сянка, ще се сблъскате с проблема да се опитате да хвърлите сянка по правилния начин. Ето как работи при групиране на изображение и текстов компонент:

HTML

Живей за момента

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Основен CSS

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

Сега приложете кутия-сянка и падаща сянка за да видиш разликата.

.drop-shadow {
филтър: падаща сянка (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.кутия,
.box img {
кутия-сянка: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Изход:

Както можете да видите, на кутия-сянка се прилага върху всеки елемент поотделно, докато падаща сянка групира и двете и прилага сянката.

Изрязани елементи

Можете да използвате клип-път свойство за изрязване на определен регион, което определя кои части от изображение или елемент трябва да се показват. В филтър за падащи сенки ни позволява да създадем a падаща сянка върху изрязания елемент, като го приложите към родителя на този елемент:

HTML

CSS

.parent-container {
филтър: падаща сянка (0rem 0rem 1.5rem maroon);
}
.clipped-element {
ширина: 50em;
височина: 50em;
марж: 0 автоматично;
фоново изображение: url (smiling-girl.jpg);
клип-път: кръг (50%);
фон-размер: корица;
фоново повторение: без повторение;
}

Изход:

Изрязахме 50% от изображението с кръгов път. Следователно, на филтър за падащи сенки се прилага само към видимата част на изображението. Не е ли страхотно?

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

Както обсъдихме по-горе, падаща сянка не поддържа разпространение параметър. Това означава, че създаването на контурен ефект не би било възможно с помощта на падаща сянка ( ) функция, защото се убива навсякъде. Също така, той прави различни ефекти на сянка от кутия-сянка и текстова сянка (със същите параметри). Може да почувствате, че разликите между кутия-сянка и падаща сянка се свежда до Модел на CSS кутия. Единият го следва, докато другият не. Ето един пример:

HTML

Всяка статия в MUO ще ви доближи с една крачка.


Всяка статия в MUO ще ви доближи с една крачка.



Всяка статия в MUO ще ви доближи с една крачка.

Основен CSS

тяло {
подложка: 5em 1em;
семейство шрифтове: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode“, Женева, Verdana, sans-serif;
}
.parent-container {
ширина: 72rem;
}
p {
размер на шрифта: 3em;
стил на шрифта: удебелен;
}

Прилагане на сенчести ефекти

.drop-shadow {
филтър: падаща сянка (0.5em 0.5em 0.1em #555);
}
.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!

Прочетете Следващото

За автора