Mehak zunanji sij, dodan elementu na vaši spletni strani, povzroči, da se element izostri gledalcu. Uporabite CSS3 in HTML za sijaj okoli zunanjih robov pomembnega predmeta. Učinek je podoben zunanjemu sijaju, ki je dodan objektu v Photoshopu.
Najprej ustvarite element do sijaja
Glow učinke lahko storite na katerikoli barvni ozadju, vendar najbolje izgledajo na temnih ozadjih, saj se potem zdi, da sijaj šimer bolj širi. V tem primeru zaokroženega kota pravokotnega polja se element DIV nahaja v drugem elementu DIV s črnim ozadjem. Zunanji DIV ni potreben za sij, vendar je težko videti sij na belem ozadju.
Daj DIV razredu sijaja:
Nastavite velikost in barvo elementa
Ko izberete element, ki ga želite okrašiti s sijočo, pojdite in dodajte sloge, ki jih želite, na primer barvo ozadja, velikost in pisave. Ta primer je modri pravokotnik; velikost je nastavljena na 147 slikovnih pik za 90 pik; barva ozadja pa je nastavljena na # 1f5afe, kraljevsko modro. Vključuje rob za postavitev elementa na sredino črnega vsebnika.
Okrog vogalov
Ustvarjanje pravokotnika z zaobljenimi koti je enostavno s CSS3. Dodajte lastnost sloga robnika v polje vašega sijaja. Ne pozabite uporabiti prefiksov -webkit in -moz- za najvišjo združljivost.
-webkit-border-radius: 15px;-moz-meja-polmer: 15px;robni polmer: 15px; Dodajte sij z zbirko sence
Sijaj je ustvarjen s senco škatle. Ker želite, da halo celoten element in ne projicirajte sence na eni strani, kot je senca, nastavite vodoravno in navpično dolžino na 0px. V tem primeru je polmer zamegljenosti nastavljen na 15 slikovnih pik in širjenje zamegljenosti je 5 pikslov, vendar lahko s temi nastavitvami določite, kako široko in razpršeno želite, da je sij. Barva rgb (255,255,190) je rumena barva z RGBa alfa prosojnostjo, nastavljena na 75% -RGB (255,255,190, .75). Izberite barvo sijaja, ki najbolj 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); Preizkusite žareč okvir
Preskusite žareče polje v enem ali več brskalnikih in opravite kakršne koli prilagoditve, potrebne za učinek, ki najbolje deluje za vašo spletno stran.
