Pehmeä ulkopuolinen hehku, joka lisätään verkkosivusi elementtiin, saa sen erottumaan katsojasta. Käyttää CSS3 ja HTML-koodi hehkun kiinnittämiseksi tärkeän objektin ulkoreunojen ympärille. Vaikutus on samanlainen kuin sisään lisätyn objektin ulkopuolinen hehku Photoshop.
Luo hehkuva elementti
Hehkuefektit toimivat millä tahansa taustalla, mutta ne näyttävät parhaiten tummilta taustoilta, koska silloin hehku näyttää hohtavan enemmän. Pyöristetyn kulman suorakulmaisessa laatikkoesimerkissä DIV-elementti sijoitetaan toiseen DIV-elementtiin, jossa on musta tausta. Ulompi DIV ei ole välttämätön hehkua varten, mutta on vaikea nähdä hehkua valkoisella pohjalla.
Aseta elementin koko ja väri
Kun olet valinnut elementin, jonka haluat kaunistaa hehkulla, lisätä tyylejä kuten taustaväri, koko ja fontit.
Tämä esimerkki on sininen suorakulmio; kokoon on asetettu 147 x 90 kuvapistettä; ja taustaväriksi on asetettu kuninkaallinen # 1f5afe. Se sisältää marginaalin elementin sijoittamiseksi mustan säiliöelementin keskelle.
Kulmien ympäri
Suorakulmion luominen pyöristetyillä kulmilla on helppoa CSS3: lla. Lisää reunan säteen tyyliominaisuus hehku luokkaasi. Muista vain käyttää –Verkkosarja– ja –Moz– etuliitteet parhaan yhteensopivuuden saavuttamiseksi.
-webkit-raja-säde: 15 kuvapistettä;
-moz-raja-säde: 15 kuvapistettä;
reunan säde: 15 kuvapistettä;
Lisää hehku laatikkovarjolla
Itse hehku on luotu laatikkovarjolla. Koska se vie koko elementin heijastamatta hehkua toiselta puolelta kuin varjo, aseta vaaka- ja pystypituudet 0 kuvapisteeseen.
Tässä esimerkissä sumennussäteeksi on asetettu 15 kuvapistettä ja epätarkkuuden leviäminen on 5 kuvapistettä, mutta voit hioa näitä asetuksia määrittääksesi, kuinka leveän ja hajautetun hehkun haluat olla. Väri rgb (25525190) on keltainen väri, RGBa-alfan läpinäkyvyys on asetettu 75 prosenttiin -rgba (255255190, .75). Valitse projektiisi parhaiten soveltuva hehkuväri. Kuten kulmien pyöristämisessä, älä unohda käyttää selaimen etuliitteitä (–Verkkosarja– ja –Moz–) parhaan yhteensopivuuden saavuttamiseksi.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
laatikko-varjo: 0px 0px 15px 5px rgba (255, 255, 190, .75);