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