DevTulz Online

CSS Box Shadow -generaattori

Tausta

Mikä on CSS Box Shadow?

CSS:n box-shadow-ominaisuus lisää varjoefektejä elementin kehyksen ympärille. Varjoja voidaan siirtää, tehdä epäteräväksi, levittää, värjätä ja asettaa inset-tilaan (sisäinen varjo). Useita pilkuilla erotettuja varjoja voidaan pinota rikkaiden efektien saavuttamiseksi. Tämä generaattori antaa sinun rakentaa visuaalisesti monimutkaisia monikerrosvarjoja ja kopioida valmiin CSS:n leikepöydälle.

Box Shadow -generaattorin käyttö

  1. Säädä Offset X/Y-, Blur- ja Spread-liukusäätimiä varjon sijoittamiseksi ja muotoilemiseksi.

  2. Napsauta värinäytettä varjon värin valitsemiseksi ja käytä Opacity-liukusäädintä läpinäkyvyyteen.

  3. Ota 'Inset' käyttöön sisäisen hehkun tai painetun tehosteen luomiseksi.

  4. Napsauta '+ Lisää kerros' pinottaaksesi useita varjoja päällekkäin.

  5. Kopioi luotu CSS ja liitä se tyylisivullesi.

Usein kysytyt kysymykset

Mitä eroa on box-shadowilla ja drop-shadow -suodattimella? box-shadow lisää varjot elementin suorakulmaisen reunaruudun ympärille ja tukee upotettuja varjoja. CSS-suodatin: drop-shadow() sovelletaan elementin visuaaliseen muotoon (mukaan lukien läpinäkyvyys), mikä saa sen seuraamaan ei-suorakulmaisia ääriviivoja, kuten PNG-kuvia läpinäkyvillä taustoilla.

Kuinka luon Material Design -kortin korotus tehosteita? Pino kaksi box-shadow-varjoa: pehmeä ympäristövarjo (suuri blur, matala opacity, hieman levitetty) ja päävarjo (pienempi blur, suurempi opacity, suuntaan siirtymä). Esimerkiksi: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Vaikuttaako box-shadow sivun asetteluun? Ei. box-shadow ei vaikuta elementin kokoon tai sijaintiin dokumentin virassa. Toisin kuin outline, se ei vie asettelutilaa eikä siirrä muita elementtejä.

Voinko animoida box-shadowia? Kyllä. box-shadow on animoitavissa CSS-siirtymillä ja animaatioilla. Suorituskyvyn vuoksi suosi box-shadow-siirtymää vain tarvittaessa — selaimet eivät voi GPU-kiihdyttää box-shadow-muutoksia yhtä tehokkaasti kuin transform tai opacity.

Keywords: CSS box shadow generaattori, box-shadow CSS, CSS varjotyökalu, CSS drop shadow, sisäinen varjo, monikerroksinen varjo, CSS shadow verkossa