При оформлении сайта очень важно не только его удобство и функционал, но и визуальная составляющая. Добавление фона, цветов, форм, различных эффектов помогают привлечь внимание. Рассмотрим одно из широко применяемых свойств в CSS − тень блока, box-shadow.
Свойства box-shadow
С помощью этого свойства можно применять тень к любому элементу в веб-дизайне и создавать потрясающие результаты. Кнопка или блок с тенью создадут эффект реалистичности, объема и намекнут на интерактивность.
Синтаксис box-shadow прописывается в CSS следующим образом:
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
Четыре первых значения указывают соответственно на горизонтальное смещение тени (x-offset), вертикальное смещение (y-offset), радиус размытия тени (blur) и расстояние распространения тени.
Если при смещении тени берется положительное значение, то тень смещается вправо по горизонтали и вниз по вертикали, а при отрицательном значении – влево по горизонтали и вверх по вертикали.
В значениях радиуса размытия отрицательных значений быть не может. При радиусе 0 тень будет иметь четкие границы, а при увеличении значения – размываться.
Расстояние распространения тени при положительных значениях ведет к расширению тени, а при отрицательных – к сжатию.
Следующие четыре значения указывают цвет (red, green, blue, alpha). Альфа канал указывает на непрозрачность и является важной составляющей для реалистичной передачи. При хорошо освещенных местах тени не будут чисто черными и плотными. Чем дальше тень от объекта, тем тень более размытая.
Можно задавать сразу несколько теней к элементу. В синтаксисе box-shadow используют несколько теней прописываются через запятую.
Если нужно создать тень внутри элемента, то прописывают ключевое слово inset. Например, box-shadow: inset 0px 0px 0px 0px rgba (0,0,0,0);. Если поставить значение none, то отображение теней отсутствует. Ключевое слово inherit наследует значение свойства родительского элемента.
При наложении нескольких теней, первая тень будет накладываться сверху, а остальные – сзади. Тени не влияют на размер прокручиваемой области.
9 примеров с box-shadow
Тень вокруг элемента
Данный вид создает эффект объемной, парящей кнопки.
Если добавим в свойства box-shadow inset (позицию и размер элемента на странице), то получим внутреннюю тень.
box-shadow: 10px 10px 10px 0.1px rgba(99, 52, 51, 0.7) inset;
Свойство box-shadow можно использовать с псевдоклассом hover и свойством transform. В этом случае при наведении курсора на блок, он будет трансформироваться.
Transfrom будет создавать иллюзию поднятия блока, а функция translate меняет размер тени по осям х и у.
See the Pen Untitled by Svetlana (@svetalk) on CodePen.
Альтернативным способом будет замена translate свойством scale (масштаб), который будет менять размер блока.
transform: scale(1.1);
See the Pen Untitled by Svetlana (@svetalk) on CodePen.
Вот такой светящийся эффект можно получить, поменяв фон на темный.
Можно задавать сразу несколько теней одновременно. Наложение теней друг на друга может усилить эффект.
Это свойство широко применяют при создании кнопок, полей ввода, карточек.
А этот вариант (неоморфизм) с использованием одноцветных элементов и наложения нескольких теней используется в современном дизайне.
Таким образом, при помощи свойства box-shadow можно выделить интерактивные элементы, создать иллюзию объема и показать важные элементы на странице.
