CSS box-shadow -generaattori
Vedä liukusäätimiä ja kopioi CSS.
- Toimii selaimessasi — tekstiäsi ei lähetetä minnekään
- Ei rekisteröitymistä, ei kiintiöitä, ilmainen käyttää niin usein kuin haluat
Näin se toimii
Box-shadow ottaa neljä lukua ja värin tietyssä järjestyksessä, ja ero syvyyden tuntuisen varjon ja tarran tuntuisen varjon välillä on kokonaan näissä luvuissa. Muutoksen näkeminen vetäessä on paljon nopeampaa kuin arvailu.
Mitä neljä lukua tarkoittavat
Järjestyksessä: vaakasiirtymä, pystysiirtymä, sumennussäde ja levitys. Siirtymät siirtävät varjoa; sumennus pehmentää sen reunaa; levitys kasvattaa tai kutistaa sitä ennen sumennusta. Negatiivinen levitys vetää varjoa sisäänpäin, millä saat tiiviin varjon kortin alle ilman, että se vuotaa sivuille.
Miten saat sen näyttämään todelliselta
Valo tulee yleensä ylhäältä, joten pieni positiivinen pystysiirtymä ilman vaakasiirtymää näyttää luonnolliselta. Suuret, hyvin läpinäkyvät varjot näyttävät pehmeältä syvyydeltä; pienet, tummat ja terävät näyttävät leikatulta tarralta. Todelliset esineet luovat sitä sumeampia varjoja, mitä kauempana ne ovat pinnasta – suurempi sumennus viittaa korkeammalla olevaan elementtiin.
Sisävarjot
Sisävarjo piirretään elementin sisään ulkopuolen sijaan, ja näin tehdään painetut painikkeet, syöttökentät ja upotetut paneelit. Samat neljä lukua pätevät, vain sisäänpäin osoittaen.
Useita varjoja kerralla
CSS hyväksyy pilkulla erotetun luettelon, ja kahden kerrostaminen – yksi tiivis ja tumma, toinen leveä ja himmeä – näyttää huomattavasti paremmalta kuin yksittäinen. Tämä generaattori tuottaa yhden; liitä kaksi yhteen itse kerrostettua vaikutelmaa varten.
CSS box-shadow -generaattori – kysymyksiä
Missä järjestyksessä arvot ovat?
Vaakasiirtymä, pystysiirtymä, sumennus, levitys, sitten väri.
Mitä negatiivinen levitys tekee?
Se kutistaa varjoa ennen sumennusta, mikä pitää sen tiiviinä elementin alla sen sijaan, että se vuotaisi sivuille.
Mikä on sisävarjo?
Varjo, joka piirretään elementin sisään sen ulkopuolen sijaan – käytetään painetuissa painikkeissa ja syöttökentissä.
Voinko tehdä kerrostetun varjon?
Ei suoraan. CSS hyväksyy pilkulla erotetun luettelon, joten luo kaksi ja liitä ne yhteen.