Научете как да добавяте ефекта на блясък бързо и лесно с CSS3

Добавете сияние към елемент от уеб страница за акцент

Мека външна светлина, добавена към елемент на вашата уеб страница, кара елемента да се открои на зрителя. Използвайте CSS3 и HTML, за да приложите блясък около външните ръбове на важен обект. Ефектът е подобен на външната светлина, добавена към обект в Photoshop.

Първо създайте елемента, за да свети

Ефектът на блясъка може да се извърши на всеки цветен фон, но те изглеждат най-добре на тъмни фон, защото тогава светлината изглежда да блести повече. В този пример за квадратна правоъгълна кутия, DIV елемент е поставен в друг DIV елемент с черен фон. Външният DIV не е необходим за блясъка, но е трудно да се види светенето на бял фон.

Дайте на DIV клас на блясък:


Задайте размера и цвета на елемента

След като изберете елемента, който ще оформите с блясък, продължете и добавете всички стилове, които искате, като цвят на фона, размер и шрифтове. Този пример е син правоъгълник; размерът е настроен на 147px на 90px; а цветът на фона е настроен на # 1f5afe - кралско синьо. Включва марж за поставяне на елемента в средата на елемента на черния контейнер.