Ang isang malambot na glow sa labas na idinagdag sa isang elemento sa iyong web page ay nagiging sanhi ng elemento upang tumayo sa viewer. Gumamit ng CSS3 at HTML upang maglapat ng isang glow sa paligid ng mga gilid sa labas ng isang mahalagang bagay. Ang epekto ay katulad ng isang glow sa labas na idinagdag sa isang bagay sa Photoshop.
Una Lumikha ng Element sa Glow
Ang mga epekto ng kislap ay maaaring gawin sa anumang kulay na background, ngunit ang hitsura nila pinakamahusay sa madilim na background dahil pagkatapos ang glow ay tila sa kumislap higit pa. Sa ganitong sulok na sulok na rectangular box na halimbawa, isang elemento ng DIV ay inilalagay sa isa pang elemento ng DIV na may itim na background. Ang panlabas na DIV ay hindi kinakailangan para sa glow, ngunit mahirap makita ang glow sa isang puting background.
Ibigay ang DIV isang uri ng glow:
Itakda ang Laki at Kulay ng Elemento
Pagkatapos mong piliin ang elemento na iyong pinapalamutian ng isang glow, magpatuloy at magdagdag ng anumang mga estilo na gusto mo dito, tulad ng kulay ng background, laki, at mga font. Ang halimbawang ito ay isang asul na parihaba; ang laki ay nakatakda sa 147px sa pamamagitan ng 90px; at ang kulay ng background ay naka-set sa # 1f5afe, isang royal blue. Kabilang dito ang isang gilid upang ilagay ang elemento sa gitna ng itim na lalagyan na sangkap.
I-round ang Corners
Ang paglikha ng isang rektanggulo na may bilugan na sulok ay madali sa CSS3. Idagdag ang estilo ng estilong hangganan-border sa iyong glow class. Tandaan lamang na gamitin ang -webkit- at -moz- prefix para sa pinakamataas na pagkakatugma.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Idagdag ang Glow na May Shadow Box
Ang glow mismo ay nilikha na may isang anino kahon. Dahil gusto mo itong halo sa buong sangkap at hindi ipapaliwanag ang glow off isang bahagi tulad ng isang anino, itinatakda mo ang pahalang at patayong haba sa 0px. Sa halimbawang ito, ang blur radius ay naka-set sa 15px at ang pagkalat ng lumabo ay 5px, ngunit maaari mong magboluntaryo sa mga setting na iyon upang matukoy kung gaano kalawak at nagkakalat ang nais mong maging glow. Ang kulay rgb (255,255,190) ay isang dilaw na kulay na may RGBa alpha transparency na nakatakda sa 75 porsiyento-rgba (255,255,190, .75). Pumili ng isang glow color na pinakamahusay na gumagana para sa iyong proyekto. Tulad ng pag-ikot ng mga sulok, huwag kalimutang gamitin ang prefix na browser (-webkit- at -moz-) para sa pinakamahusay na pagkakatugma.
-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); Subukan ang Glowing Box
Subukan ang kumikinang na kahon sa isa o higit pang mga browser at gumawa ng anumang mga pagsasaayos na kinakailangan upang mabigyan ang glow effect na pinakamahusay na gumagana para sa iyong web page.
