Мягкое внешнее свечение, добавленное к элементу на вашей веб-странице, заставляет элемент выделяться зрителю. Используйте CSS3 и HTML, чтобы применить свечение вокруг внешних границ важного объекта. Эффект подобен внешнему свечению, добавленному к объекту в Photoshop.
Сначала создайте элемент для свечения
Эффект свечения можно сделать на любом цветовом фоне, но они выглядят лучше всего на темном фоне, потому что тогда сияние, кажется, мерцает больше. В этом примере прямоугольного прямоугольника с квадратным углом элемент DIV помещается в другой элемент DIV с черным фоном. Внешний DIV не нужен для свечения, но трудно видеть свечение на белом фоне.
Дайте DIV класс свечения:
Задайте размер и цвет элемента
После того, как вы выберете элемент, который вы собираетесь украсить светом, добавьте в него все стили, такие как цвет фона, размер и шрифты. Этот пример представляет собой синий прямоугольник; размер установлен на 147px на 90px; и цвет фона установлен на # 1f5afe, королевский синий. Он включает в себя запас для размещения элемента в середине элемента черного контейнера.
Круглые углы
Создание прямоугольника с закругленными углами легко с помощью CSS3. Добавьте свойство стиля border-radius в класс свечения. Не забудьте использовать -webkit- и -moz-префиксы для максимальной совместимости.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Добавить свечение с теней короны
Сама свечение создается с тенью коробки. Поскольку вы хотите, чтобы он затормозил весь элемент, а не проецировал свечение с одной стороны, как тень, вы устанавливаете горизонтальную и вертикальную длины в 0px. В этом примере радиус размытия устанавливается равным 15px, а разброс размытия составляет 5px, но вы можете играть с этими настройками, чтобы определить, насколько широким и диффузным вы хотите, чтобы светило было. Цвет rgb (255,255,190) является желтым цветом с прозрачностью RGBa alpha, установленной на 75 процентов-rgba (255,255,190, .75). Выберите цвет свечения, который лучше всего подходит для вашего проекта. Как и при округлении углов, не забудьте использовать префикс браузера (-webkit- и -moz-) для лучшей совместимости.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75); Испытайте светящуюся коробку
Протестируйте свечение в одном или нескольких браузерах и внесите необходимые корректировки, чтобы дать эффект свечения, который лучше всего подходит для вашей веб-страницы.
