Box-shadow • За CSS

Свойството box-shadow ви позволява да добавяте една или повече сенки към елементи.

Синтаксисът е много прост:

Този код ще даде сянка като тази:

Първата стойност е отговорна за левия отстъп, а втората - отгоре Стойностите могат да бъдат отрицателни. Третото е радиусът на размазване. Ако стойността не е посочена или равна на 0, сянката има остри ръбове. Четвъртото е да намалите или увеличите сянката. Стойностите могат да бъдат отрицателни.

За съжаление стойностите на предишните свойства не могат да бъдат зададени като процент.

Последната стойност е цвят. Много е удобно да го зададете в hsla или rgba, така че сянката да е прозрачна и да затъмнява основния фон, независимо от цвета му.

Няма начин да предефинирате само цвета на сянката, за това трябва да дублирате всички стойности.

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

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

За разлика от градиентите, сенките са анимирани, така че в някои случаи те могат да се използват вместо градиенти.

Освен това, ако има няколко сенки, промяната на реда на посочените сенки по време на анимация дава интересен ефект:

Можете да правите много интересни неща със сенки, всъщност от сенки до различни декоративни елементи.

Всеки от примерите по-долу е направен със сенки, базирани на отделен div, някои от които използват псевдоелементи:

Можете също така да направите дъга:

Или например бутони:

Или балон с текст:

Изненадващ брой възможности се предоставят от толкова просто свойство.

Също така наскоро станаха популярни дългите сенки (в случая това е box-shadow + text-shadow):

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

Неудобно е да пишете такива неща с ръцете си, така че ще бъде по-лесно да използвате генератори:

Недостатъкът на този метод е, че сенките могат да се прилагат само върху равномерен фон, но ако се използват разумно, те изглеждат много впечатляващи.