Box-shadow-generaattori

Näin käytät box-shadow-generaattoria

1. Aloita esiasetuksesta tai pidä oletuksena oleva Pehmeä varjo. Esiasetukset-rivillä on Pehmeä, Terävä, Kerroksellinen, Korotus, Neumorfismi, Sisäinen ja Hehku.
2. Kohdassa Varjokerrokset napsauta kerrosta valitaksesi sen. Kerrosta voi siirtää painikkeilla Siirrä ylös ja Siirrä alas tai poistaa painikkeella Poista. Lisää kerros monistaa valitun kerroksen, jotta voit hienosäätää kopiota.
3. Muokkaa valittua kerrosta kohdassa Muokkaa valittua kerrosta: vedä pistettä Siirtymä-alueella tai käytä liukusäätimiä ja lukukenttiä: Vaakasiirtymä (px), Pystysiirtymä (px), Sumennus (px) ja Levitys (px).
4. Valitse Varjon väri värinvalitsimella tai kirjoita mikä tahansa CSS-väri koodikenttään ja aseta sitten Peittävyys (%). Valitse Sisäinen (sisävarjo), jos haluat piirtää varjon laatikon sisäpuolelle.
5. Säädä Esikatseluasetukset (Laatikon väri, Taustaväri, Kulmien pyöristys (px)), niin näet varjon omilla väreilläsi. Ne vaikuttavat vain esikatseluun.
6. Kopioi määrittely kohdasta CSS-koodi painikkeella Kopioi.

Näppäimistö: kohdista piste Siirtymä-alueella ja siirrä sitä nuolinäppäimillä 1 px kerrallaan tai Shiftillä 10 px.

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Näin box-shadow toimii

Yhden varjon syntaksi on box-shadow: [inset] x y blur spread color.

• x ja y siirtävät varjoa oikealle ja alas. Negatiiviset arvot siirtävät sitä vasemmalle ja ylös. Elementin yläpuolella oleva valonlähde tarkoittaa positiivista y-arvoa.
• Blur eli sumennus pehmentää reunaa. Se ei voi olla negatiivinen. Sumennus 0 antaa laatikosta teräväreunaisen kopion.
• Spread eli levitys suurentaa (positiivinen) tai pienentää (negatiivinen) varjoa ennen sumennusta. Negatiivinen levitys ja suuri y-arvo pitävät varjon elementin alla sen ympärillä olemisen sijaan.
• Väri sisältää yleensä läpinäkyvyyttä. Tämä työkalu kirjoittaa peittävät värit HEX-muotoon ja läpikuultavat rgba()-muotoon, jonka kaikki selaimet ymmärtävät. Jos kirjoitat värin, jossa on jo alfakanava, Peittävyys (%) kertoo sen.
• inset asettaa varjon reunan sisäpuolelle, ikään kuin laatikko olisi painettu sivuun.

Varjo seuraa elementin border-radius-arvoa eikä koskaan muuta asettelua: se ei vie tilaa eikä aiheuta vierityspalkkeja.

Miksi useita varjoja päällekkäin?

Oikeat varjot eivät ole yksi sumennettu suorakulmio. Pieni, tumma ja tiukka varjo on aivan kohteen alla, ja suuri, haalea ja sumea levittäytyy kauemmas. Kahden–viiden kerroksen pinoaminen jäljittelee tätä ja näyttää paljon luonnollisemmalta kuin yksi raskas varjo. Kerroksellinen-esiasetus kaksinkertaistaa siirtymän ja sumennuksen jokaisella askeleella pienellä peittävyydellä, mikä on monissa design-järjestelmissä suosittu tekniikka. Korotus jäljittelee Material Designin kolmikerroksisia varjoja.

Luettelon ensimmäinen kerros maalataan muiden päälle täsmälleen kuten CSS-arvossakin. Järjestyksellä on merkitystä lähinnä silloin, kun sekoitat sisä- ja ulkovarjoja tai käytät voimakkaita värejä.

Neumorfismi

Neumorfismi (”soft UI”) käyttää kahta varjoa elementissä, jonka väri on sama kuin taustan: tumma varjo siirrettynä alas ja oikealle sekä vaalea siirrettynä ylös ja vasemmalle. Neumorfismi-esiasetus asettaa molemmat värit arvoon #e0e5ec. Muista, että tyylin kontrasti on heikko, joten sillä tehdyt painikkeet tarvitsevat selkeän kohdistustilan ja luettavat tekstit.