CSS-varjogeneraattori: livepreview, kopioi koodi

CSS-varjogeneraattori

Tämä generaattori rakentaa yhden CSS box-shadow -arvon kuudesta säätimestä: vaakasiirtymä, pystysiirtymä, sumennussäde, levityssäde, varjon väri omalla peittävyysliukusäätimellään sekä inset-kytkin. Kaksi muuta värivalitsinta asettavat esikatselulaatikon ja sen taustan, jotta varjo näkyy oikein sekä vaaleilla että tummilla pinnoilla, ja neljä esiasetusta, soft, hard, glow ja inset, lataavat valmiin yhdistelmän yhdellä klikkauksella. Jokainen muutos päivittää heti esikatselun alla olevan box-shadow-rivin, joka on valmis kopioitavaksi yhdellä klikkauksella leikepöydälle.

Miten box-shadow-arvo rakentuu

CSS kirjoittaa varjon kiinteässä järjestyksessä: vaakasiirtymä, pystysiirtymä, sumennussäde, levityssäde, sitten väri; jos varjo halutaan piirtää laatikon reunan sisäpuolelle taakse jäämisen sijaan, eteen lisätään sana inset. Vaaka- ja pystysiirtymä siirtävät varjoa sivulle tai pystysuunnassa, ja molemmat hyväksyvät negatiivisia arvoja aina -50px:iin asti, joten varjo voi jäädä laatikon vasemmalle puolelle tai sen yläpuolelle sen sijaan, että se aina osuisi oikealle tai alas. Sumennussäde, väliltä 0-100px, pehmentää varjon reunaa, ja levityssäde, väliltä -50-50px, suurentaa tai pienentää varjoa riippumatta laatikon omasta koosta. Värivalitsimen heksa-arvo jaetaan punaiseen, vihreään ja siniseen osaan, ja peittävyysliukusäädin, väliltä 0-1, muuttuu rgba()-arvon neljänneksi luvuksi; arvolla 0 varjo on täysin läpinäkyvä, arvolla 1 se vastaa täsmälleen valittua väriä. Erillinen laatikon värivalitsin ja taustan värivalitsin vaikuttavat vain esikatseluun, eivät itse kopioitavaan arvoon.

Laskettu esimerkki

Kun vaakasiirtymäksi asetetaan 3px, pystysiirtymäksi 6px, sumennukseksi 14px ja levitykseksi 1px, yhdessä varjon värin #047857 ja peittävyyden 0,3 kanssa, tulokseksi saadaan box-shadow: 3px 6px 14px 1px rgba(4, 120, 87, 0.3). Heksakoodi #047857 jakautuu punaiseksi 4, vihreäksi 120 ja siniseksi 87, ja peittävyysliukusäätimen 0,3 muuttuu suoraan rgba()-arvon neljänneksi luvuksi ilman muita muunnoksia. Insetin kytkeminen päälle samoilla kuudella arvolla piirtää saman varjon laatikon reunan sisäpuolelle taakse jäämisen sijaan, mikä on yleinen tehokeino painetuille painikkeille tai upotetuille syöttökentille. Neljä valmista esiasetusta, soft, hard, glow ja inset, tarjoavat omat valmiit lukunsa samoille kuudelle säätimelle, jos oman yhdistelmän hakeminen liu'uttamalla tuntuu hitaalta.

Kopioitava CSS-tuloste

.kortti {
  box-shadow: 3px 6px 14px 1px rgba(4, 120, 87, 0.3);
}