O strălucire moale din exterior adăugată la un element de pe pagina dvs. web face ca elementul să iasă în evidență. Utilizați CSS3 și HTML pentru a aplica o strălucire în jurul marginilor unui obiect important. Efectul este similar cu o strălucire exterioară adăugată unui obiect din Photoshop.
Mai întâi creați elementul pentru a străluci
Efectele strălucite se pot face pe orice fundal de culoare, dar arată cel mai bine pe fundaluri întunecate, deoarece atunci strălucirea pare să strălucească mai mult. În acest exemplu de cutie dreptunghiulară rotunjită, un element DIV este plasat într-un alt element DIV cu fundal negru. DIV exterior nu este necesar pentru strălucire, dar este greu să vezi strălucirea pe un fundal alb.
Dați DIV o clasă de strălucire:
Setați dimensiunea și culoarea elementului
După ce alegeți elementul pe care doriți să-l decorați cu o strălucire, continuați și adăugați orice stiluri pe care doriți să o utilizați, cum ar fi culoarea de fundal, dimensiunea și fonturile. Acest exemplu este un dreptunghi albastru; dimensiunea este setată la 147px cu 90px; iar culoarea de fundal este setată la # 1f5afe, un albastru regal. Acesta include o marjă pentru a plasa elementul în mijlocul elementului container negru.
În jurul colțurilor
Crearea unui dreptunghi cu colturi rotunjite este usor cu CSS3. Adăugați proprietatea stilului razei de margine la clasa strălucire. Nu uitați să utilizați prefixele -webkit- și -moz- pentru a obține cea mai mare compatibilitate.
-webkit-border-radius: 15px;-moz-border-radius: 15px;raza de graniță: 15 pixeli; Adăugați Glow With a Shadow Box
Strălucirea însăși este creată cu o umbra cutie. Pentru că doriți ca acesta să aureze întregul element și să nu proiecteze strălucirea pe o parte ca o umbră, setați lungimile orizontale și verticale la 0px. În acest exemplu, raza de estompare este setată la 15 pixeli, iar răspândirea neclarității este de 5 pixeli, dar puteți să vă jucăm cu acele setări pentru a determina cât de largă și difuză doriți să fie strălucirea. Culoarea rgb (255,255,190) este o culoare galbenă cu transparență alfa RGBa setată la 75% rgba (255,255,190,75). Alegeți o culoare strălucitoare care funcționează cel mai bine pentru proiectul dvs. Ca și în cazul rotunjirea colțurilor, nu uitați să utilizați prefixele browserului (-webkit- și -moz-) pentru cea mai bună compatibilitate.
-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); Testați caseta Glowing
Testați caseta strălucitoare într-unul sau mai multe browsere și faceți toate ajustările necesare pentru a obține efectul de strălucire care funcționează cel mai bine pentru pagina dvs. web.
