Додајте ефекте сјаја елементима помоћу ЦСС 3

Благи спољни сјај додат елементу на вашој веб страници чини тај елемент истакнутим за гледаоца. Користите ЦСС3 и ХТМЛ за примену сјаја око спољних ивица важног објекта. Ефекат је сличан сјају споља доданом објекту у Пхотосхоп.

Направите елемент да светли

Ефекти сјаја делују на било којој позадини, али најбоље изгледају на тамној позадини, јер тада сјај изгледа више светлуца. У примеру правоугаоне кутије са заобљеним углом, ДИВ елемент је смештен у други ДИВ елемент са црном позадином. Спољни ДИВ није потребан за сјај, али тешко је видети сјај на белој позадини.

Подесите величину и боју елемента

Након што одаберете елемент који ћете улепшати сјајем, додајте стилове као што су боја позадине, величина и фонтови.

Овај пример је плави правоугаоник; величина је постављена на 147пк са 90пк; а боја позадине је постављена на # 1ф5афе, краљевско плава. Укључује маргину за постављање елемента у средину црног елемента контејнера.


instagram viewer

Заокружите углове

Стварање правоугаоника са заобљеним угловима је лако са ЦСС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);
instagram story viewer