Множественная тень с эффектом свечения с помощью CSS
Если по дизайну для текста нужна тень то обычно мы используем 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, главные плюсы видео курсов — что можно учиться в любое время в любом месте, вы не привязаны к графику и можно за раз проходить по несколько уроков. Но самое главное в обучении — это практика, поэтому простой просмотр курсов на фоне или в машине не даст результата. Настоятельно рекомендую полученные на видео курсе знания сразу же закреплять практикой.
Задача — добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их…
Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга…
Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих…
Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены…