Pehmeä ulkopuolinen hehku, joka lisätään Web-sivusi elementtiin, saa elementin erottumaan katsojalle. Käytä CSS3: n ja HTML: n avulla hehkun tärkeän esineen ulkoreunojen ympärille. Vaikutus on samanlainen kuin Photoshopissa olevan objektin ulkopuolinen hehku.
Ensin luo elementti hehkumaan
Hehkuvaikutukset voidaan tehdä millä tahansa taustalla, mutta ne näyttävät parhaiten tummilta taustoilta, koska hehku tuntuu hämmentävältä. Tässä pyöristetyn kulman suorakulmaisessa laatikon esimerkissä DIV-elementti sijoitetaan toiseen DIV-elementtiin, jossa on musta tausta. Ulkoinen DIV ei ole tarpeen hehkua varten, mutta on vaikea nähdä hehkua valkoisella taustalla.
Anna DIVille hehkun luokka:
Aseta elementin koko ja väri
Kun olet valinnut elementin, jonka haluat hehkua koristamaan, siirry eteenpäin ja lisää siihen haluamasi tyylit, kuten taustaväri, koko ja fontit. Tämä esimerkki on sininen suorakulmio; koko on 147px 90px; ja taustaväri on # 1f5afe, kuninkaallinen. Se sisältää marginaalin sijoittaa elementti mustan kontin elementin keskelle.
Pyöristää kulmat
CSS3: n avulla on helppo luoda suorakulmion pyöristetyt kulmat. Lisää raja-säditystyyliominaisuus hehkuluokkaan. Muista vain käyttää -webkit- ja -moz-etuliitteitä korkeinta yhteensopivuutta.
-webkit-raja-säde: 15px;-moz-raja-säde: 15px;raja-säde: 15px; Lisää hehku laatikkoruuvilla
Hehku itse luodaan laatikkomaavalla. Koska halutaan, että se haloo koko elementin ja ei heijasta yhtä puolta kuin varjo, aseta vaaka- ja pystysuuntaiset pituudet 0px: ksi. Tässä esimerkissä hämärtymusäde asetetaan 15px: ksi ja hämärtymän leviäminen on 5px, mutta voit säätää näiden asetusten avulla, kuinka suuri ja diffuusi haluat hehkun. Värin rgb (255,255,190) on keltainen väri, jonka RGBa-alfa-läpinäkyvyys on asetettu 75 prosenttiin (255,255,190, .75). Valitse hehkuvuosi, joka toimii parhaiten projektisi kanssa. Kuten kulmien pyöristämisessä, älä unohda selaimen etuliitteitä (-webkit- 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); Testaa hehkuva laatikko
Testaa hehkuva laatikko yhdellä tai useammalla selaimella ja tee tarvittavat muutokset antamaan hehkuvaikutus, joka toimii parhaiten verkkosivustossasi.
