Узнайте, как быстро и легко добавлять эффекты свечения с помощью CSS3

Добавьте свечение к элементу веб-страницы для акцента

Мягкое внешнее свечение, добавленное к элементу на вашей веб-странице, заставляет элемент выделяться для зрителя. Используйте CSS3 и HTML, чтобы применить свечение вокруг внешних краев важного объекта. Эффект похож на внешнее свечение, добавленное к объекту в Photoshop.

Сначала создайте элемент для свечения

Эффекты свечения могут быть сделаны на любом цветном фоне, но они лучше всего смотрятся на темном фоне, потому что тогда свечение кажется более ярким. В этом примере прямоугольного прямоугольника с закругленными углами элемент DIV помещается в другой элемент DIV с черным фоном. Внешний DIV не нужен для свечения, но трудно увидеть свечение на белом фоне.

Дайте DIV класс свечения:

Установите размер и цвет элемента

После того, как вы выберете элемент, который вы хотите украсить светом, добавьте в него любые стили, которые вы хотите, например, цвет фона, размер и шрифты. Этот пример – синий прямоугольник; размер установлен на 147px на 90px; и цвет фона установлен на # 1f5afe, королевский синий цвет. Он включает поле для размещения элемента в середине черного элемента контейнера.


.glow {
margin: auto;
ширина: 147px;
высота: 90px;
цвет фона: # 1f5afe;
}

Вокруг углов

Создать прямоугольник с закругленными углами легко с помощью CSS3. Добавьте свойство стиля border-radius в свой класс свечения. Просто не забудьте использовать префиксы –webkit– и –moz– для максимальной совместимости.

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Добавьте свечение с тенью от коробки

Само свечение создается тенью от коробки. Поскольку вы хотите, чтобы он ореол всего элемента и не проецировал свечение на одну сторону, как тень, вы устанавливаете горизонтальную и вертикальную длину в 0px. В этом примере радиус размытия установлен на 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, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255 , 255, 190, 0,75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);

Проверьте светящийся ящик

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

Оцените статью
Solutics.ru
Добавить комментарий