Mekani vanjski sjaj dodan elementu na vašoj web stranici uzrokuje da se element ističe gledatelju. Koristite CSS3 i HTML kako biste primijenili sjaj oko vanjskih rubova važnog objekta. Učinak je sličan vanjskom sjaju dodanom objektu u programu Photoshop.
Prvo stvorite element na sjaju
Sjajni efekti mogu se izvesti na bilo kojoj boji pozadini, ali oni izgledaju najbolje na tamnim pozadinama, jer tada sjaj izgleda da sjaji više. U ovom okruglom kutu primjer pravokutnog kutija, DIV element se nalazi u drugom DIV elementu s crnom pozadinom. Vanjski DIV nije potreban za sjaj, ali je teško vidjeti sjaj na bijeloj pozadini.
Dajte DIV klasu sjaja:
Postavite veličinu i boju elementa
Nakon što odaberete element koji ćete uljepšati sjajem, pođite naprijed i dodajte sve stilove koji želite, kao što su boja pozadine, veličina i fontovi. Ovaj primjer je plavi pravokutnik; veličina je postavljena na 147px za 90px; a boja pozadine postavljena je na # 1f5afe, kraljevsko plavo. To uključuje marginu za postavljanje elementa u sredinu crnog spremnika.
Oko kuta
Stvaranje pravokutnika s zaobljenim kutovima je jednostavno s CSS3. Dodajte svojstvo stila obruba radijusa granice u vašu klasu sjaja. Nemojte zaboraviti koristiti prečice -webkit- i -moz za najvišu kompatibilnost.
-webkit-border-radius: 15px;-moz-granični polumjer: 15px;granični polumjer: 15px; Dodajte sjaj s sjenom okvira
Sjaj je stvoren s sjenom kutije. Budući da želite da obavi cijeli element i ne projicira sjaj s jedne strane kao sjena, postavite horizontalnu i vertikalnu duljinu na 0 px. U ovom primjeru, radijus zamućenosti postavljen je na 15px, a širenje zamućenja je 5px, ali možete odrediti koliko je širina i difuzno želite li svjetlost biti. Boja rgb (255,255,190) je žuta boja s RGBa alfa prozirnošću postavljenom na 75% -tna (255,255,190, .75). Odaberite boju sjaja koja najbolje odgovara vašem projektu. Kao i kod zaokruživanja uglova, nemojte zaboraviti 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); Ispitajte Glowing Box
Ispitajte sjajnu kutiju u jednom ili više preglednika i podesite sve potrebne prilagodbe kako biste dobili efekt sjaj koji najbolje odgovara vašoj web stranici.
