Käyttöohje

Aloita esiasetuksesta tai säädä ensimmäisen kerroksen siirtymää, sumennusta, leviämää, väriä ja peittävyyttä.
Lisää kerroksia, niin saat luonnollisemman syvyysvaikutelman, tai valitse ”Inset” sisävarjoa varten.
Vaihda esikatselun tausta ja laatikon väri suunnittelua vastaavaksi ja kopioi sitten CSS.

Näin se toimii

box-shadow saa kutakin kerrosta kohden vaakasuoran siirtymän, pystysuoran siirtymän, sumennussäteen, levityssäteen ja värin; valinnaisesti edessä voi olla inset. Positiiviset siirtymät siirtävät varjoa oikealle ja alas. Sumennus pehmentää reunaa eikä voi olla negatiivinen; levitys kasvattaa (positiivinen) tai kutistaa (negatiivinen) varjoa ennen sumennusta. Useat kerrokset erotetaan pilkuilla, ja ensimmäinen kerros piirretään päällimmäiseksi.

Realistinen kohotus yhdistää yleensä pienen, tiukan varjon suurempaan, pehmeämpään varjoon pienellä peittävyydellä, kuten “Elevated”-esiasetus tekee. Värit kirjoitetaan rgba()-muodossa, joten peittävyys on suoraan näkyvissä. Varjot noudattavat elementin border-radius-arvoa eivätkä vie tilaa asettelussa, joten ne eivät koskaan siirrä muita elementtejä.

Hyvin suuret sumennusarvot monissa elementeissä voivat hidastaa vierittämistä vaatimattomissa puhelimissa. Jos animoit varjoa, on yleensä sujuvampaa häivyttää esiin pseudo-elementti, jolla varjo jo on, kuin animoida itse box-shadow-ominaisuutta.

Esimerkit

Kortti vaalealla sivulla

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); antaa kortille terävän reunan ja pehmeän kohotuksen.

Tarkennusrengas ilman asettelun siirtymää

Kerros, jossa siirtymä on 0, sumennus 0 ja levitys 3px brändivärilläsi, piirtää napin ympärille yhtenäisen renkaan. Toisin kuin reunus, se ei muuta elementin kokoa.

Painettu syöttökenttä

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) saa tekstikentän näyttämään hieman upotetulta.

Usein kysytyt kysymykset

Mitä eroa on box-shadow-ominaisuudella ja filter: drop-shadow()-suodattimella?

box-shadow seuraa elementin laatikkoa ja border-radius-arvoa sekä tukee leviämää (spread) ja sisävarjoa (inset). drop-shadow() seuraa näkyvää muotoa, myös PNG- ja SVG-kuvien läpinäkyviä alueita, mutta siinä ei ole leviämää eikä sisävarjoa.

Miksi varjoni leikkautuu?

Jos vanhemmalla elementillä on overflow: hidden, se leikkaa kaiken laatikon ulkopuolelle jäävän, myös varjot. Lisää vanhemmalle padding tai siirrä overflow-määritys muualle.

Kuinka monta kerrosta kannattaa käyttää?

Yksi tai kaksi kerrosta riittää useimpiin käyttöliittymiin. Useammat kerrokset voivat näyttää pehmeämmiltä, mutta niiden piirtäminen on hieman raskaampaa, millä on merkitystä pitkissä listoissa.

Tietosuoja

CSS luodaan selaimessasi. Mitään ei ladata palvelimelle eikä tallenneta.