В CSS полно опций для улучшения внешнего вида ваших веб-сайтов; тени текста и блоков являются яркими примерами. Они дают результаты, аналогичные теням, найденным в программном обеспечении для редактирования изображений, таком как Photoshop.

Но как работают тени CSS? Давайте погрузимся прямо в.

Как использовать тень блока CSS

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

box-shadow: вставка цвета распространения размытия offset-x offset-y;

Давайте рассмотрим каждое из значений по порядку.

Положение тени блока CSS

Значения offset-x и offset-y управляют положением вашей тени. Значение offset-x представляет горизонтальное положение тени, а offset-y — вертикальное смещение.

 коробка-тень: 10px 10px;

Положительные значения приводят к появлению тени ниже и справа от элемента.

Вы также можете использовать отрицательные значения для h-смещения и v-смещения:

instagram viewer 
 коробка-тень: -10px -10px;

Отрицательное смещение по h перемещает тень влево, а отрицательное смещение по v перемещает ее вверх:

Размытие теней CSS Box

Как вы можете видеть, добавление h-смещения и v-смещения к вашей тени создает сплошную тень без какого-либо растушевки. Значение размытия размывает тень блока CSS и вступает в силу, если вы укажете третье значение:

коробка-тень: 10px 10px 20px;

Чем выше число, которое вы добавите к значению размытия, тем более размытой будет ваша тень блока CSS. Это значение не может быть отрицательным.

Распространение теней CSS Box

Значение распространения позволяет вам изменить размер вашей тени, не изменяя ее положение.

 коробка-тень: 10px 10px 20px 30px;

Положительное значение разброса сделает вашу тень окна CSS больше, а отрицательное значение сделает ее меньше.

Цвет тени блока CSS

Тени блоков CSS по умолчанию соответствуют цвету текста элемента, но вы можете переопределить это, добавив цвет:

коробка-тень: 10пикс. 10пикс. 20пикс. 10пикс. #0000ff;

Используемый цвет должен быть в допустимом цветовом формате CSS, таком как шестнадцатеричный код, код RGB или предопределенный цвет. Ты можешь узнать о шестнадцатеричных кодах и другие допустимые параметры цвета CSS, прежде чем вы начнете со своими тенями.

Вставка тени блока CSS

Тени блоков CSS по умолчанию выходят за пределы назначенного им элемента. Добавив вставку к свойству box-shadow, вы можете отобразить тень внутри элемента.

коробка-тень: 10пикс. 10пикс. 20пикс. 10пикс. Вставка #0000ff;

Это предопределенное текстовое значение; просто добавьте или удалите его, чтобы установить значение.

Как использовать тень текста CSS

Текстовые тени CSS похожи на тени блоков, хотя у них меньше значений для изменения. Синтаксис тени текста CSS выглядит следующим образом:

text-shadow: смещение-x смещение-y цвет радиуса размытия;

Но как работают эти значения?

Положение тени текста в CSS

Смещение тени текста в CSS работает очень похоже на те же значения тени блока:

тень текста: 10px 10px;

Положительные значения поместят тень ниже и справа от текста.

Отрицательные значения делают обратное, размещая тень выше и слева от текста.

 тень текста: -10px -10px;

Вы можете смешивать отрицательные и положительные значения, чтобы идеально расположить тень текста CSS.

CSS Радиус размытия тени текста

Радиус размытия тени текста CSS позволяет размыть тень позади текста.

тень текста: 10px 10px 10px;

Значение по умолчанию для этого значения равно 0 (без размытия).

Цвет тени текста CSS

По умолчанию тени текста CSS соответствуют цвету текста. Вы можете изменить цвет текста, добавив его в конец свойства тени текста CSS.

текст-тень: 10пикс. 10пикс. 10пикс. #0000ff;

Как и в случае с цветами теней в CSS, вы должны использовать допустимый цвет CSS для этого.

Примеры дизайна CSS Box и Text Shadow

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

Двухцветные границы с двумя тенями CSS Box

К элементу HTML можно добавить более одной тени блока или тени текста. Если между ними есть запятые, вы можете добавлять новые тени к одному свойству.

коробка-тень: 30пикс. 30пикс.#0000ff, -30px-30px 0пикс.#00ff00;

Эта двухцветная рамка является хорошим примером этого. Две тени CSS с противоположными позициями и без размытия/разброса создают прекрасную творческую границу.

Двойные текстовые тени CSS для драматического эффекта

Аналогично приведенной выше идее, вы можете добавить и расположить текст с несколькими текстовыми тенями для получения интересных результатов.

text-shadow: 35px 20px 4px темно-серый, -35px -20px 4px темно-серый;

В этом примере показана строка текста с тенью вверху и тенью внизу, обе из которых имеют значения цвета на основе текста.

Многоцветные фоны со вставленными тенями CSS Box

CSS достаточно мощен, чтобы создавать уникальные и интересные активы без каких-либо внешних файлов. Использование встроенной тени блока CSS в качестве фона — отличный пример этого.

коробка-тень: 20пикс. 10пикс. 10пикс. 40пикс. #000000 вставка, -50px -30px 8px 60px серая вставка, 30px 20px 6px 90px светло-серая вставка;

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

Дальнейшее усиление этого эффекта является простым вопросом добавление стильного фонового градиента CSS к вашей стихии.

CSS Box Shadows & Text Shadows для креативного веб-дизайна

Блоки CSS и текстовые тени просты в использовании, если вы знаете, как с ними работать. Теперь у вас есть инструменты, необходимые для работы над собственным дизайном, но вам следует продолжать изучать CSS, чтобы совершенствовать свои навыки.