Додајте сјај у Елемент Веб странице за нагласак
Меки спољни сјај додан елементу на вашој веб страници доводи до тога да се елемент издвоји гледаоцу. Користите ЦСС3 и ХТМЛ да бисте применили сјај око вањских ивица важног објекта. Ефекат је сличан спољном сјају доданом објекту у Пхотосхопу.
Прво креирајте елемент да сије
Сјајни ефекти могу се обавити на било којој боји, али изгледају најбоље у тамним позадинама, јер тада изгледа да сјај шири више. У овом примеру заокруженог угла правоугаоне кутије, ДИВ елемент се налази у другом ДИВ елементу са црном позадином. Спољни ДИВ није потребан за сјај, али је тешко видети сјај на белој позадини.
Дај ДИВ класу сјаја:
Подесите величину и боју елемента
Након што изаберете елемент који ћете улепшати сјај, идите напред и додајте све стилове које желите, као што су боје позадине, величина и фонтови. Овај примјер је плави правоугаоник; величина је подешена на 147пк по 90пк; а боја позадине је подешена на # 1ф5афе, краљевско плаво. Укључује маргину за постављање елемента у сред елемента црног контејнера.
<стиле> <бр/> .глов {<бр/> маржа: ауто; <бр/> ширина: 147пк; <бр/> висина: 90пк; <бр/> позадина боја: # 1ф5афе; <бр/>} <бр/>
Округли углови
Креирање правоугаоника са заобљеним угловима је једноставно са ЦСС3. Додајте својство стила граничног радијуса у своју сјајну класу. Само запамтите да користите -вебкит- и -моз- префиксе за највећу компатибилност.
-вебкит-граница-радијус: 15пк;
-моз-граница-радијус: 15пк;
гранични радијус: 15пк;
Додајте сјај с кутијом сенке
Сјај се ствара са сјенком у кутији. Зато што желите да окреће целокупни елемент и не пројектује сјај са једне стране као сенка, поставите хоризонталне и вертикалне дужине на 0пк. У овом примјеру, радијус замућења је подешен на 15пк, а ширење замућења је 5пк, али можете с тим подешавањима преварити како бисте утврдили колико је широко и дифузно желите сјај. Боја ргб (255,255,190) је жута боја са РГБа алфа провидношћу постављена на 75% -РГБ (255,255,190, .75). Изаберите боју сјаја која најбоље одговара вашем пројекту. Као и заокруживање углова, не заборавите да користите префиксе претраживача (-вебкит- и -моз-) за најбољу компатибилност.
-вебкит-бок-схадов: 0пк 0пк 15пк 5пк ргба (255, 255, 190, .75);
-моз-бок-схадов: 0пк 0пк 15пк 5пк ргба (255, 255, 190, .75);
бок-схадов: 0пк 0пк 15пк 5пк ргба (255, 255, 190, .75);
Тестирајте сјајну кутију
Тестирајте сјајну кутију у једном или више претраживача и направите потребна прилагођавања да бисте добили ефекат сјаја који најбоље функционише за вашу веб страницу.