Mehek zunanji sij, dodan elementu na vaši spletni strani, naredi element izstopajoč za gledalca. Uporaba CSS3 in HTML za sijaj okoli zunanjih robov pomembnega predmeta. Učinek je podoben zunanjemu sijaju, dodanemu predmetu v Photoshop.
Ustvari element, ki sveti
Učinki sijaja delujejo na katerem koli ozadju, vendar so najboljši na temnih ozadjih, ker se potem zdi, da sijaj bolj blešči. V primeru pravokotne škatle z zaobljenim vogalom je element DIV postavljen v drug element DIV s črno podlago. Zunanji DIV ni potreben za sijaj, vendar je težko videti sij na belem ozadju.
Nastavite velikost in barvo elementa
Ko izberete element, ki ga boste polepšali s sijajem, dodajte sloge kot so barva ozadja, velikost in pisave.
Ta primer je modri pravokotnik; velikost je nastavljena na 147 x 90 slikovnih pik; in barva ozadja je nastavljena na # 1f5afe, kraljevsko modra. Vključuje rob za postavitev elementa na sredino elementa črne posode.
Krog vogalov
S CSS3 je enostavno ustvariti pravokotnik z zaobljenimi vogali. Lastnosti sloga border-radius dodajte v svoj razred sijaja. Ne pozabite uporabiti –Webkit– in –Moz– predpone za najvišjo združljivost.
-spletni-polmer-meje: 15 slikovnih pik;
-moz-polmer meje: 15 slikovnih pik;
rob polmera: 15 slikovnih pik;
Dodajte sijaj s škatlasto senco
Sijaj je ustvarjen s škatlasto senco. Ker halo zajema celoten element, ne da bi kot senco projiciral sijaj z ene strani, nastavite vodoravno in navpično dolžino na 0px.
V tem primeru je polmer zameglitve nastavljen na 15 slikovnih pik, širina zamegljenosti pa je 5 slikovnih pik, vendar lahko s temi nastavitvami določite, kako širok in razpršen želite imeti sijaj. Barva rgb (255.255.190) je rumena barva s prosojnostjo RGBa alfa, nastavljeno na 75 odstotkov -rgba (255,255,190,, 75). Izberite sijočo barvo, ki najbolje ustreza vašemu projektu. Kot pri zaokroževanju vogalov ne pozabite uporabiti predpone brskalnika (–Webkit– in –Moz–) za najboljšo združljivost.
-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);