Tärkeimmät kohdat
- 01Jokainen box-shadow-parametri omia liukuja sekä numeerinen syöttö pixel-tarkkuus virittäminen.
- 02Sisään vaihto vaihtaa pudota varjo ja sisä varjo painettujen tai neumorfinen vaikutuksista.
- 03Väri ja läpinäkyvyys hallitaan erikseen, tuottaa rgba() luettava CSS:lle.
- 04Esikatselu käyttää todellinen CSS-omaisuus todellisuuden kokonaisuus — mitä näet on tarkalleen mitä tyylisivulla tekee.
Miksi käyttää visuaalisen Box-Shadow-generaattori
CSS box-shadow ottaa jopa kuusi arvoa — vaakasuora siirtymä, pystysuora siirtymä, sumennus säde, levittää säde, väri, ja valinnai sisään avainsana. Kirjoitus niistä muistiin toimii yksinkertaisille varjoille, mutta mitä tahansa tarkempaa — kireä leike, syvä pudota varjo, pehmeä korkeus kerros — olet arvaileva ja lataa kunnes jotain näyttää oikein.
Visuaalinen generaattori romahtaa iteraatio silmukka. Siirrä liukuja, näe muutoksen hetkessä, ja kopioi vain kun olet tyytyväinen. Handytool:in box-shadow generaattori juoksee kokonaan selaimessasi, niin esikatselu on todellinen CSS-omaisuus soveltaa todellinen elementti — mitään renderöinti eroavaisuudet työkalun ja varsinainen sivun välillä.
Kuinka suunnitella Box Varjo
- 01
Säädä vaakasuora ja pystysuora siirtymät
Positiiviset arvot siirrä varjo oikealle ja alas. Negatiiviset arvot siirtää sen vasemmalle ja ylös. Keskitetty varjo (0, 0) luo leike vaikutus.
- 02
Aseta sumennus säde
Korkeampi sumennus arvot luoda pehmeämpi, enemmän diffuuseista varjoa. Nolla sumennus tuottaa kova, kiinteä varjo ohjaus.
- 03
Säädä levittää säde
Positiivinen levitä suurentaa varjo ennen sumentaminen. Negatiivinen levitä kutistaa se, mikä on hyödyllinen tiukka-kokonaisuus-alle-varjo.
- 04
Valitse väri ja läpinäkyvyys
Käytä väri-valitsin valita varjo vivahde, sitten siirrä alas läpinäkyvyys subtlety osalta. Tuotos käyttää rgba() pitää arvot luettavissa.
- 05
Vaihda sisään tarpeen
Sisään vaihtaa pudota varjo sisä varjo — hyödyllinen painettujen painikkeet, sunken syöttää, ja neumorfinen pinnat.
- 06
Kopioi CSS ilmoitus
Napsauta Kopioi saadaksesi täydellinen box-shadow arvo ja liitä se tyylisivulla.
Ei lataus, ei tiliä
Generaattori on kokonaan asiakaspuoli. Väri valinta, numeeriset arvot, ja esikatselu osavaltioiden pysyä selaimessasi — mitään ei lähetetä palvelimelle. Mitään tiliä luoda ja mitään käyttöä raja.
Koska esikatselu elementti käyttää todellinen CSS box-shadow ominaisuus, tuotos on tarkkaa määritelmä — mitään kanvaa renderöinti tai kuvakaappaus lähentäminen vaatii. Pikselit arvot kopioit ovat pikselit arvot selain soveltaa.
Box-Shadow Generaattori FAQ
Mitä levittää arvo tekee?
Positiivinen levitä suurentaa varjo kaikilla suunnilla ennen sumennus sovelletaan; negatiivinen levitä kutistaa se. Hyödyllinen tiukka, määritelty leikkeet kun paritettu matala sumennus.
Voinko lisätä useat box varjot?
Tämä generaattori tuottaa yksi varjo yhdessä. Että kerrokset niistä, kopioi arvo ja erillinen useita varjot pilkulla tyylisivulla — box-shadow hyväksyy pilkulla erillinen luettelo.
Miksi on sisään varjo näkymätön?
Sisään varjot vetää sisä-osa, joten he tarvitse tausta väri tai näkyvä täytettä näytölle. He eivät näy läpinäkyvät tai nolla-kokoinen kokonaisuus.
Onko esikatselu pikselit-tarkkaa?
Kyllä — esikatselu käyttää todellinen CSS box-shadow ominaisuus todellista DOM kokonaisuus, niin mitä näet on tarkalleen mitä tyylisivulla tekee.
Mitä on neumorfinen varjo?
Neumorfismi käyttää kaksi varjot — yksi valo ja yksi tumma — siirtymä vastakkain suunnissa tehdä kokonaisuus näyttö nostettu tai painettu tasainen pinta-ala. Molemmat varjot ovat tyypillisesti sisään varten painettu muunnos.