Teie veebilehe elemendile lisatud pehme väliskülg muudab elemendi vaatajale silma. Kasutage CSS3 ja HTML, et rakendada sära olulise objekti välisservade ümber. Mõju sarnaneb välisele helgile, mis lisatakse objektile Photoshop.
Looge helendav element
Kumaefektid toimivad mis tahes taustal, kuid kõige paremini näevad need välja tumedal taustal, sest siis näib kuma rohkem virvendavat. Ümarnurgalises ristkülikukujulises kasti näites paigutatakse DIV-element teise musta taustaga DIV-i elementi. Välimine DIV ei ole kuma jaoks vajalik, kuid valgel taustal on kuma raske näha.
Määrake elemendi suurus ja värv
Kui olete valinud elemendi, mida soovite kaunistada, lisada stiile nagu taustavärv, suurus ja fondid.
See näide on sinine ristkülik; suurus on seatud 147 x 90 pikslit; ja taustavärviks on seatud kuninglik sinine # 1f5afe. See sisaldab varu elemendi paigutamiseks musta anumaelemendi keskele.
Ümber nurkade
Ümarate nurkadega ristküliku loomine on CSS3 abil lihtne. Lisage oma helendusklassi piirjoone raadiuse stiil. Ärge unustage lihtsalt kasutada –Veebikomplekt– ja –Moz– kõrgeima ühilduvuse tagamiseks eesliited.
-webkit-piiri-raadius: 15px;
-moz-piiri-raadius: 15px;
piiri raadius: 15 pikslit;
Lisage karpvarjuga sära
Kuma ise on loodud kasti varju. Kuna see paigutab kogu elemendi nii, et see ei paistaks hõõgumist ühelt küljelt nagu vari, määrake horisontaalne ja vertikaalne pikkus 0px.
Selles näites on hägususe raadiuseks seatud 15 pikslit ja hägususe levik on 5 pikslit, kuid võite nende sätetega ringi käia, et teha kindlaks, kui lai ja hajuv kuma soovite. Värv rgb (255 255 190) on kollane värv, mille RGBa alfa läbipaistvus on seatud 75 protsendile -rgba (255 255 190, 0,75). Valige oma projekti jaoks kõige paremini sobiv kuma värv. Nagu nurkade ümardamisel, ärge unustage kasutada brauseri eesliiteid (–Veebikomplekt– ja –Moz–) parima ühilduvuse tagamiseks.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
kasti vari: 0px 0px 15px 5px rgba (255, 255, 190, .75);