Множественная тень с эффектом свечения с помощью CSS

13.08.2020

Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком формате:

text-shadow: 0 0 20px #fff;

И получаем такую простую тень:

dark

Темная тень на светлом фоне будет хорошо видна, а вот светлая тень на темном фоне размывается и становится еле заметной, при этом “усилить ее или сделать ярче” простым изменением цвета или увеличением ширины тени не получится.

Синтаксис text-shadow:

/* смещение-x | смещение-y | радиус-размытия | цвет */
text-shadow: 1px 1px 2px black; 

/* цвет | смещение-x | смещение-y | радиус-размытия */
text-shadow: #fc0 1px 0 10px; 

/* смещение-x | смещение-y | цвет */
text-shadow: 5px 5px #558abb;

/* цвет | смещение-x | смещение-y */
text-shadow: white 2px 5px;

/* смещение-x | смещение-y
/* Используем значения по умолчанию для цвета и радиуса-размытия */
text-shadow: 5px 10px;

/* Значения принятые глобально */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Но у теней есть одно свойство о котором мало кто знает – можно задавать много теней для одного объекта, и таким образом можно например, задать несколько разных теней, разных цветов и размеров, с разным смещением или же если задавать тень в одном месте, то можно ее усилить наложением друг на друга.

Пример указания нескольких теней для одного объекта через запятую:

text-shadow: 10px 10px 0 #bff7ec, -10px -10px 0 #bff7ec;

Пример текста с несколькими тенями:

dark

Код для “усиления тени” путем наложения множества теней в одной области. Таким образом получается эффект похожий на свечение:

text-shadow: 0 0 4px #00c6a0, 0 0 8px #00c6a0, 0 0 12px #00c6a0, 0 0 16px #00c6a0, 0 0 20px #00c6a0;

Множественная тень с эффектом свечения:

dark

Если вам сложно понять данный материал, или непонятно, как правильно задавать какие-то CSS-правила для элементов, то я рекомендую почитать спецификацию CSS (что-нибудь из серии O’Reilly) или пройти курсы HTML-верстальщика, например на этом сайте https://itvdn.com/ru/specialities/html-coder, главные плюсы видео курсов – что можно учиться в любое время в любом месте, вы не привязаны к графику и можно за раз проходить по несколько уроков. Но самое главное в обучении – это практика, поэтому простой просмотр курсов на фоне или в машине не даст результата. Настоятельно рекомендую полученные на видео курсе знания сразу же закреплять практикой.

Полезная инфа:

Оставить комментарий