Box-shadow • За CSS
Свойството box-shadow ви позволява да добавяте една или повече сенки към елементи.
Синтаксисът е много прост:
Този код ще даде сянка като тази:
Първата стойност е отговорна за левия отстъп, а втората - отгоре Стойностите могат да бъдат отрицателни. Третото е радиусът на размазване. Ако стойността не е посочена или равна на 0, сянката има остри ръбове. Четвъртото е да намалите или увеличите сянката. Стойностите могат да бъдат отрицателни.
За съжаление стойностите на предишните свойства не могат да бъдат зададени като процент.
Последната стойност е цвят. Много е удобно да го зададете в hsla или rgba, така че сянката да е прозрачна и да затъмнява основния фон, независимо от цвета му.
Няма начин да предефинирате само цвета на сянката, за това трябва да дублирате всички стойности.
Има още един параметър - вложка. Ако е зададена, сянката се хвърля вътре в елемента.
Когато използвате множество сенки, те се задават една след друга, разделени със запетаи.
За разлика от градиентите, сенките са анимирани, така че в някои случаи те могат да се използват вместо градиенти.
Освен това, ако има няколко сенки, промяната на реда на посочените сенки по време на анимация дава интересен ефект:
Можете да правите много интересни неща със сенки, всъщност от сенки до различни декоративни елементи.
Всеки от примерите по-долу е направен със сенки, базирани на отделен div, някои от които използват псевдоелементи:
Можете също така да направите дъга:
Или например бутони:
Или балон с текст:
Изненадващ брой възможности се предоставят от толкова просто свойство.
Също така наскоро станаха популярни дългите сенки (в случая това е box-shadow + text-shadow):
Същността на метода е да се използват различни сенки, докато най-близките до формата имат цвета, всъщност сенките, а тези, които са най-отдалечени от него, плавно преминават към цвета на фона. Използването на rgba с прозрачност няма да работи тук, защото тогава сенките ще проникват една под друга.
Неудобно е да пишете такива неща с ръцете си, така че ще бъде по-лесно да използвате генератори:
Недостатъкът на този метод е, че сенките могат да се прилагат само върху равномерен фон, но ако се използват разумно, те изглеждат много впечатляващи.
- 1 курс - Организатор на развъждане в кучевъдството
- Водни бои Статии
- NCS Expert, първи стъпки, смяна на интервала на маслото))) (част 1)
- Хидроцефалия на породи кучета джуджета
- Neste променя облика на своите бензиностанции в Санкт Петербург