CSS Box Shadow Generaattori
Ilmainen online CSS box-shadow generaattori. Luo kauniita varjoja visuaalisesti säädettävällä siirtymällä, sumennuksella, leviämisellä, värillä ja insetillä. Live-esikatselu ja välitön koodin kopiointi.
Mikä on CSS box-shadow?
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.
Mitkä ovat box-shadow parametrit?
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.
Mikä on inset-avainsana?
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.
Mikä on sumennussäde?
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ä.
Mikä on leviämissäde?
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öä.
Miten luon useita varjoja?
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ä.
Voinko käyttää RGBA-värejä varjoille?
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.
Miten kopioin luodun CSS-koodin?
Napsauta vain "Kopioi koodi" -painiketta generaattorin käyttöliittymässä. CSS-koodi kopioidaan leikepöydällesi ja voidaan liittää suoraan tyylitiedostoosi tai HTML-tiedostoosi.
Tuetaanko box-shadow kaikissa selaimissa?
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.
Vaikuttaako box-shadow suorituskykyyn?
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.
Mitkä ovat box-shadow yleisiä käyttötapauksia?
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.
Voinko animoida box-shadow?
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.
Näin käytät työkalua CSS Box Shadow Generaattori
Suunnittele CSS box-shadow -varjoja visuaalisesti sen sijaan, että arvaisit arvoja. Generaattori toimii paikallisesti selaimessasi, eikä mitään syöttämääsi lähetetä.
- Aseta H-Offset ja V-Offset siirtääksesi varjoa vaakasuunnassa ja pystysuunnassa.
- Nosta Blur-arvoa pehmentääksesi reunoja ja käytä Spread-arvoa suurentaaksesi tai pienentääksesi varjoa.
- Valitse Color ja säädä sen Opacity-arvoa pehmeämpää ja luonnollisempaa ilmettä varten.
- Valitse Inset, jotta varjo piirretään elementin sisään sen ympärille sijaan.
- Kopioi valmis box-shadow-sääntö esikatselusta tyylisivuusi.
Pieni blur ja hieman positiivinen V-Offset tuottavat elementin juuri alle hienovaraisen, realistisen kosketusvarjon.
Aiheeseen liittyvät työkalut
- CSS Border Radius Generaattori Visuaalinen CSS border-radius generaattori. Säädä jokaista kulmaa itsenäisesti reaaliaikaisella esikatselulla ja kopioi CSS-koodi välittömästi.
- CSS-liukuvärigeneraattori Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
- CSS Grid-generaattori Ilmainen visuaalinen CSS Grid-generaattori live-esikatselulla. Suunnittele responsiivisia grid-asetteluja interaktiivisesti ja vie tuotantovalmis CSS-koodi heti.
- CSS Flexbox-generaattori Visuaalinen CSS Flexbox-generaattori live-esikatselulla. Säädä flex-ominaisuuksia ja saa heti käyttövalmis CSS-koodi.
- Border-radius Generaattori Ilmainen luova border-radius-generaattori verkossa. Raahaa 8 kahvaa tai valitse blob-pohja luodaksesi orgaanisia CSS-muotoja ja kopioidaksesi koodin heti.
- Värimuunnin Ilmainen online-värimuunnin. Muunna HEX, RGB, HSL, HSV muodot välittömästi visuaalisella valitsimella. 100% yksityinen, toimii selaimessasi.
- CSS easing generaattori Ilmainen online CSS easing generaattori. Raahaa cubic-bezier-ohjauspisteitä interaktiivisella käyrällä, valitse 18 esiasetuksen joukosta, katso jatkuvaa pallon animaatiota ja kopioi ajoitusfunktio heti.
- CSS tekstivarjo generaattori Ilmainen online tekstivarjogeneraattori. Pinoa useita varjokerroksia siirrolla, sumennuksella, värillä ja peittävyydellä, kokeile Neon-, 3D- ja Retro-esiasetuksia ja kopioi CSS heti.