Мека външна светлина, добавена към елемент на вашата уеб страница, кара елемента да се открои на зрителя. Използвайте CSS3 и HTML, за да приложите блясък около външните ръбове на важен обект. Ефектът е подобен на външната светлина, добавена към обект в Photoshop.
Първо създайте елемента, за да свети
Ефектът на блясъка може да се извърши на всеки цветен фон, но те изглеждат най-добре на тъмни фон, защото тогава светлината изглежда да блести повече. В този пример за квадратна правоъгълна кутия, DIV елемент е поставен в друг DIV елемент с черен фон. Външният DIV не е необходим за блясъка, но е трудно да се види светенето на бял фон.
Дайте на DIV клас на блясък:
Задайте размера и цвета на елемента
След като изберете елемента, който ще оформите с блясък, продължете и добавете всички стилове, които искате, като цвят на фона, размер и шрифтове. Този пример е син правоъгълник; размерът е настроен на 147px на 90px; а цветът на фона е настроен на # 1f5afe - кралско синьо. Включва марж за поставяне на елемента в средата на елемента на черния контейнер.
Около ъглите
Създаването на правоъгълник със заоблени ъгли е лесно с CSS3. Добавете свойството на стил на радиус в класа си на блясък. Само не забравяйте да използвате -webkit- и -mop-prefixes за най-висока съвместимост.
-webkit-border-радиус: 15px;-moz-border-radius: 15px;радиус на границата: 15px; Добавете сиянието с кутия Shadow
Самата светлина се създава със сянка на кутията. Тъй като искате да ореолите целия елемент и да не прожектирате отблясъка от едната страна като сянка, зададете хоризонталната и вертикалната дължина на 0px. В този пример радиусът на размазване е настроен на 15 пкс и разпространението на размазването е 5 пиксела, но можете да се движите с тези настройки, за да определите колко широка и дифузна искате да е светлината. Цветът rgb (255,255,190) е жълт цвят с прозрачност RGBa алфа, зададена на 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);кутия-сянка: 0px 0px 15px 5px rgba (255, 255, 190, .75); Тествайте сияещата кутия
Тествайте светещата кутия в един или повече браузъри и направете необходимите настройки, за да постигнете ефекта на блясъка, който работи най-добре за вашата уеб страница.
