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