Engeza ukukhanya ku-Element Page Element for Emphasis
Ukukhanya okuncane okungekho ngaphandle kwengezwe kwisici ekhasini lakho lewebhu kwenza ukuba isici sivelele kumbukeli. Sebenzisa i- CSS3 ne-HTML ukusebenzisa ukukhanya okuzungeze izingxenyeni zangaphandle zento ebalulekile. Umphumela ufana nokukhanya kwangaphandle okungeziwe entweni e-Photoshop.
Okokuqala Yakha I-Element Ukukhanya
Imiphumela emihle ingenziwa kunoma iyiphi imvelaphi yembala, kodwa ibukeka kahle kunemvelaphi emnyama ngenxa yokuthi ukukhanya kubonakala kunokuningi. Kulesi sibonelo sebhokisi esingumgogodla wekhoneni, isici se-DIV sifakwa kwenye into ye-DIV enemvelaphi emnyama. I-DIV yangaphandle ayikho isidingo sokukhanya, kodwa kunzima ukubona ukukhanya emlandweni omhlophe.
Nikeza i-DIV iklasi lokukhanya:
Setha ubukhulu nombala we-Element
Ngemuva kokuthi ukhethe isici ozoyihlobisa ngokukhanya, qhubeka futhi ungeze noma yiziphi izitayela ozifunayo, njengombala wangemuva, usayizi, namafonti. Lesi sibonelo uhlangothi oluhlaza okwesibhakabhaka; ubukhulu bubekwe ku- 147px nge 90px; futhi umbala wesizinda usethelwe ku- # 1f5afe, i-royal blue. Ihlanganisa umkhawulo ukuze ubeke isici phakathi kwesici se-container emnyama.
.glow {
umgodi: auto;
ububanzi: 147px;
ukuphakama: 90px;
umbala wangemuva: # 1f5afe;
}
Dlulela emaqenjini
Ukwakha umugqa ohlangothini olunezimbambo kulula nge-CSS3. Engeza impahla yesitayela se-border-grade ekilasini lakho elikhanyayo. Mane ukhumbule ukusebenzisa ama-pre-yebkit-and -moz- prefixes okuhambisana kakhulu.
-webkit-border-radius: 15px;
Umzila-umngcele-i-radius: 15px;
umngcele-umngcele: 15px;
Engeza ukukhanya nge-Shadow Box
Ukukhanya ngokwayo kudalwa ngebhokisi lesibhokisi. Ngenxa yokuthi ufuna ukuyifaka yonke into futhi ungakhanjisi ukukhanya komunye uhlangothi njengethunzi, usetha ubude obunembile nobude obuyi-0px. Kulesi sibonelo, i-radius ye-blur isethelwe ku-15px futhi ukusakazwa kwe-blur ngu-5px, kodwa ungakwazi ukufakela kulawo masethingi ukuthola ukuthi ububanzi bukhulu kangakanani futhi ufuna ukukhanya kube khona. I-rgb yombala (255,255,190) umbala ophuzi ne-RGBa i-transparent alpha ihlelwe kuma-75%-rgba (255,255,190, .75). Khetha umbala okhanyayo osebenza kahle kakhulu kuphrojekthi yakho. Njengokuqeda izingxenyana, ungakhohlwa ukusebenzisa izibikezelo zesiphequluli (-webkit- and -moz-) ukuze kuhambisane kahle.
-webkit-ibhokisi-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-ibhokisi-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
ibhokisi-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
Hlola ibhokisi elikhazimulayo
Hlola ibhokisi elikhazimulayo kusiphequluli esisodwa noma ngaphezulu futhi wenze noma yiziphi izinguquko ezidingekayo ukuze unikeze umphumela wokukhanya osebenza kangcono ekhasini lakho lewebhu.