O strălucire exterioară moale adăugată la un element de pe pagina dvs. web face ca elementul să iasă în evidență pentru vizualizator. Utilizare CSS3 și HTML pentru a aplica o strălucire în jurul marginilor exterioare ale unui obiect important. Efectul este similar cu o strălucire exterioară adăugată unui obiect din Photoshop.
Creați elementul pentru a străluci
Efectele de strălucire funcționează pe orice fundal, dar arată cel mai bine pe fundalurile întunecate, deoarece atunci strălucirea pare să strălucească mai mult. Într-un exemplu de cutie dreptunghiulară cu colț rotunjit, un element DIV este plasat într-un alt element DIV cu fundal negru. DIV-ul exterior nu este necesar pentru strălucire, dar este greu să vezi strălucirea pe un fundal alb.
Setați dimensiunea și culoarea elementului
După ce alegeți elementul pe care îl veți înfrumuseța cu o strălucire, adăugați stiluri la acesta, cum ar fi culoarea de fundal, dimensiunea și fonturile.
Acest exemplu este un dreptunghi albastru; dimensiunea este setată la 147 px cu 90 px; iar culoarea de fundal este setată la # 1f5afe, un albastru regal. Include o marjă pentru a plasa elementul în mijlocul elementului container negru.
În jurul colțurilor
Crearea unui dreptunghi cu colțuri rotunjite este ușoară cu CSS3. Adăugați proprietatea stilului razei de margine la clasa dvs. de strălucire. Nu uitați să utilizați –Webkit– și –Moz– prefixe pentru cea mai mare compatibilitate.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
raza chenarului: 15 px;
Adăugați strălucirea cu o umbră de cutie
Strălucirea în sine este creată cu o umbră de cutie. Deoarece distruge întregul element fără a proiecta strălucirea pe o parte ca o umbră, setați lungimile orizontale și verticale la 0 px.
În acest exemplu, raza de estompare este setată la 15 px și răspândirea estompării este de 5 px, dar puteți juca cu aceste 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 rotunjirii 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);