Nježni vanjski sjaj dodan elementu na vašoj web stranici čini taj element istaknutim za gledatelja. Koristiti CSS3 i HTML za primjenu sjaja oko vanjskih rubova važnog objekta. Učinak je sličan vanjskom sjaju dodanom objektu u Photoshop.
Stvorite element za sjaj
Efekti sjaja djeluju na bilo kojoj pozadini, ali najbolje izgledaju na tamnoj pozadini jer tada sjaj izgleda više svjetluca. U primjeru pravokutnog okvira sa zaobljenim kutom, DIV element smješten je u drugi DIV element s crnom pozadinom. Vanjski DIV nije potreban za sjaj, ali teško je vidjeti sjaj na bijeloj pozadini.
Postavite veličinu i boju elementa
Nakon što odaberete element koji ćete uljepšati sjajem, dodati stilove kao što su boja pozadine, veličina i fontovi.
Ovaj je primjer plavi pravokutnik; veličina je postavljena na 147px sa 90px; a boja pozadine postavljena je na # 1f5afe, kraljevsko plava. Uključuje marginu za postavljanje elementa u sredinu crnog elementa spremnika.
Zaokružite kutove
Stvaranje pravokutnika sa zaobljenim kutovima jednostavno je pomoću CSS3. Dodajte svojstvo stila border-radius svojoj klasi sjaja. Samo zapamtite da koristite –Webkit– i –Moz– prefiksi za najveću kompatibilnost.
-webkit-radijus-granice: 15px;
-moz-radijus-granice: 15px;
radijus obruba: 15 piksela;
Dodajte sjaj s okvirom u sjeni
Sam sjaj stvoren je kutijastom sjenom. Budući da halozira čitav element bez projiciranja sjaja s jedne strane poput sjene, postavite vodoravnu i okomitu duljinu na 0 px.
U ovom primjeru radijus zamućenja postavljen je na 15 piksela, a širenje zamućenja je 5 piksela, ali možete petljati po tim postavkama da biste utvrdili koliko širok i difuzan želite da sjaj bude. Boja rgb (255,255,190) je žuta boja s prozirnošću RGBa alfa postavljenom na 75 posto—rgba (255,255,190,, 75). Odaberite sjajnu boju koja najbolje odgovara vašem projektu. Kao i kod zaokruživanja uglova, ne zaboravite koristiti prefikse preglednika (–Webkit– i –Moz–) za najbolju kompatibilnost.
-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);