CSS-laatikkovarjon perusteet ja toiminta
CSS-koodin box-shadow-ominaisuus määrittää elementille yhden tai useamman varjon. Varjon ulkoasuun vaikuttavat useat eri parametrit, joita säätämällä voidaan muuttaa varjon suuntaa, kokoa, pehmeyttä ja väriä. Box Shadow -generaattori tarjoaa visuaalisen tavan näiden arvojen määrittämiseen ja yhdistämiseen.
Työkalussa on esiasennettuna viisi varjotasoa. Ensimmäisen tason oletusarvot ovat 0 8 24 -4 ja sen värinä on 18-prosenttisesti läpinäkyvä musta. Muut neljä tasoa ovat aluksi piilotettuina, mutta ne voidaan ottaa käyttöön tarpeen mukaan. Kaikki säädöt päivittävät CSS-tulostetta reaaliaikaisesti, ja valmis koodi on kopioitavissa suoraan käyttöön.
Varjon ominaisuuksien säätäminen
Laatikkovarjon muotoilu perustuu tarkkoihin numeerisiin arvoihin, joita säädetään generaattorin liukusäätimillä. Jokainen säädin vaikuttaa varjon fyysiseen käyttäytymiseen ja visuaaliseen ilmeeseen seuraavasti:
- Vaakasiirtymä: Siirtää varjoa vaakasuunnassa vasemmalle tai oikealle. Säätöalue on -50px:stä 50px:iin.
- Pystysiirtymä: Siirtää varjoa pystysuunnassa ylös tai alas. Säätöalue on -50px:stä 50px:iin.
- Pehmennys (Blur): Määrittää, kuinka paljon varjon reunat sumenevat. Arvoalue on 0px (täysin terävä reuna) ja 100px (erittäin pehmeä reuna) välillä.
- Levitys (Spread): Kasvattaa tai kutistaa varjon kokoa ennen pehmennyksen soveltamista. Säätöalue on -50px:stä 50px:iin. Negatiivinen arvo vetää varjoa sisäänpäin, jolloin se jää elementin taakse piiloon reunoiltaan.
- Varjon väri: Värivalitsimella määritettävä värisävy, joka antaa varjolle sen perussävyn.
- Peittävyys (Opacity): Säätää varjon läpinäkyvyyttä, jolloin varjosta voidaan tehdä joko hyvin haalea tai täysin tumma.
- Sisäpuolinen varjo (Inset): Valitsin, joka kääntää varjon suunnan elementin ulkopuolelta sen sisäpuolelle.
Monitasoiset varjot ja syvyysvaikutelman luominen
Yksittäinen varjo voi usein näyttää litteältä tai epäluonnolliselta, jos sen kokoa kasvatetaan paljon. Luonnollisen syvyysvaikutelman saavuttamiseksi web-suunnittelussa käytetään usein useita päällekkäisiä varjotasoja.
Generaattorissa tasojen hallinta tapahtuu seuraavilla toiminnoilla:
- Lisää taso: Luo uuden varjotason oletusarvoilla.
- Poista taso: Poistaa valitun varjotason kokonaan.
Kun käytössä on useita tasoja, generaattori yhdistää ne yhdeksi CSS-säännöksi, jossa eri tasojen arvot luetellaan pilkuilla erotettuina. Tämän tekniikan avulla voidaan luoda esimerkiksi pehmeitä, useamman portaan kautta hajoavia varjoja, jotka jäljittelevät todellisen maailman valon käyttäytymistä paremmin kuin yksittäinen jyrkkä varjo.
Erilaisten visuaalisten efektien toteuttaminen
Säätöjen yhdistelmillä voidaan luoda erilaisia käyttöliittymäelementtejä:
| Efekti | Vaakasiirtymä | Pystysiirtymä | Pehmennys | Levitys | Sisäpuolinen varjo (Inset) |
|---|---|---|---|---|---|
| Tiivis ja matala varjo | Pieni (esim. 1px–2px) | Pieni (esim. 2px–4px) | Matala | Negatiivinen (vetää varjoa sisään) | Ei käytössä |
| Pehmeä ja leveä varjo | Lähellä nollaa | Suurempi (esim. 8px–16px) | Korkea | Nolla tai negatiivinen | Ei käytössä |
| Upotettu elementti (esim. syöttökenttä) | Vaihteleva | Vaihteleva | Kyllä | Vaihteleva | Käytössä |
Käyttämällä "Sisäpuolinen varjo (Inset)" -vaihtoehtoa elementti saadaan näyttämään siltä, että se on painettu sisäänpäin ympäröivästä pinnasta. Tämä sopii erityisesti lomakekentille tai painetuille painikkeille. Ulkopuoliset varjot puolestaan saavat elementit, kuten kortit ja valikot, näyttämään siltä, että ne leijuvat taustan yläpuolella.
Tietosuoja ja tekninen suorituskyky
Tämä työkalu toimii kokonaan paikallisesti käyttäjän laitteella. Jokainen varjo renderöidään selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun. Tämä tarkoittaa, että voit muotoilla ja kokeilla erilaisia varjoja ilman huolta tietojen siirtymisestä ulkopuolisille palvelimille.
Usein kysytyt kysymykset
Mitä siirtymä, pehmennys ja levitys tarkalleen ottaen ohjaavat?
Siirtymä (offset) liikuttaa varjoa vasemmalle/oikealle ja ylös/alas, pehmennys (blur) pehmentää sen reunoja ja levitys (spread) kasvattaa tai kutistaa sitä ennen pehmennystä. Negatiivinen levitys vetää varjoa sisäänpäin, mikä on hyödyllistä tiiviissä, lähellä olevissa varjoissa.
Mitä inset-vaihtoehto tekee?
Tavallinen varjo lankeaa elementin ulkopuolelle, kuten valo kohotetun kortin takana. Inset-asetus kääntää varjon sisäpuolelle, jolloin elementti näyttää upotetulta – tämä on kätevää esimerkiksi syöttökentissä tai painetuissa painikkeissa.
Miksi kannattaa käyttää useampaa kuin yhtä varjotasoa?
Yksittäinen varjo näyttää litteältä tietyn koon jälkeen. Luonnollinen syvyysvaikutelma syntyy yleensä yhdistämällä tiivis, tumma varjo pehmeämpään ja leveämpään varjoon – lisää toinen taso ja säädä niitä erikseen saavuttaaksesi tämän vaikutelman.
Miten negatiivinen levitysarvo vaikuttaa varjoon?
Negatiivinen levitysarvo (Spread) pienentää varjon kokoa sen lähtöpisteessä ennen kuin pehmennystä sovelletaan. Tämä vetää varjon reunoja sisäänpäin elementin rajojen alle, mikä estää varjoa näkymästä liian leveänä elementin sivuilla ja auttaa luomaan hienovaraisempia ja kohdistetumpia varjoefektejä.