CSS Box Shadow Generaattori

CSS box-shadow on CSS-ominaisuus, joka lisää varjotehosteita elementin kehyksen ympärille. Sen avulla voit luoda pudotusvarjoja, sisäisiä varjoja ja useita varjokerroksia määrittämällä siirtymän, sumennussäteen, leviämissäteen ja väriarvot.

box-shadow-ominaisuus hyväksyy useita arvoja: vaakasuuntainen siirtymä (X), pystysuuntainen siirtymä (Y), sumennussäde, leviämissäde, väri ja valinnainen inset-avainsana. Voit myös määrittää useita varjoja pilkuilla erotettuna.

inset-avainsana muuttaa varjon ulkoisesta varjosta (pudotusvarjo) sisäiseksi varjoksi. Kun inset on määritetty, varjo piirretään elementin reunan sisäpuolelle eikä ulkopuolelle, mikä luo inset-tehosteen.

Sumennussäde määrittää, kuinka paljon varjon reuna sumennetaan. Arvo 0 luo terävän, kiinteän reunan. Suuremmat arvot luovat levinneemmän, pehmeämmän varjon, joka ulottuu kauemmas elementistä.

Leviämissäde laajentaa tai supistaa varjon kokoa. Positiiviset arvot tekevät varjosta suuremman kuin elementti, kun taas negatiiviset arvot tekevät siitä pienemmän. Tämä vaikuttaa varjoon ennen sumennuksen käyttöä.

Voit luoda useita varjoja erottamalla jokaisen varjomääritelmän pilkulla. Jokaisella varjolla voi olla eri siirtymä-, sumennus-, leviämis- ja väriarvot. Varjot käytetään siinä järjestyksessä, jossa ne on ilmoitettu, ensimmäinen varjo päällimmäisenä.

Kyllä, voit käyttää mitä tahansa CSS-värimuotoa, mukaan lukien RGBA, HSLA, HEX tai nimetyt värit. RGBA ja HSLA ovat erityisen hyödyllisiä puoliläpinäkyvien varjojen luomisessa, jotka sekoittuvat luonnollisesti taustojen kanssa.

Napsauta vain "Kopioi koodi" -painiketta generaattorin käyttöliittymässä. CSS-koodi kopioidaan leikepöydällesi ja voidaan liittää suoraan tyylitiedostoosi tai HTML-tiedostoosi.

Kyllä, box-shadow tuetaan kaikissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox, Safari, Edge ja Opera. Se on ollut osa CSS3:a vuodesta 2011 ja sillä on erinomainen selainyhteensopivuus.

box-shadow vaikuttaa minimaalisesti nykyaikaisten selainten suorituskykyyn. Useiden monimutkaisten varjojen käyttäminen suurella sumennussäteellä monissa elementeissä voi kuitenkin vaikuttaa renderöintisuorituskykyyn, erityisesti mobiililaitteissa.

Yleisiä käyttötarkoituksia ovat korttien korotustehosteiden luominen, syvyyden lisääminen painikkeisiin, inset-lomakekenttien luominen, material design -varjojen toteuttaminen ja visuaalisen erottelun lisääminen päällekkäisten elementtien välille.

Kyllä, box-shadow voidaan animoida CSS-transitioiden tai -animaatioiden avulla. Box-shadow'n animointi voi kuitenkin olla suorituskykyvaatimuksia. Parempi suorituskyky saadaan käyttämällä pseudo-elementtejä opacity-transitioiden kanssa.