Box-shadow generaator

Kuidas box-shadow generaatorit kasutada

1. Alusta eelseadest või jäta vaikimisi Pehme vari. Rida Eelseaded pakub valikuid Pehme, Terav, Kihiline, Kõrgus, Neumorfism, Sisemine ja Hõõgus.
2. Jaotises Varjukihid klõpsa kihil, et see valida. Iga kihti saab liigutada nuppudega Liiguta üles ja Liiguta alla või kustutada nupuga Eemalda. Lisa kiht dubleerib valitud kihi, et saaksid koopiat muuta.
3. Muuda valitud kihti jaotises Muuda valitud kihti: lohista punkti paneelil Nihe või kasuta liugureid ja arvuvälju väärtustele Horisontaalne nihe (px), Vertikaalne nihe (px), Hägu (px) ja Laotus (px).
4. Vali Varju värv värvivalijaga või sisesta suvaline CSS-i värv koodiväljale, seejärel sea Läbipaistmatus (%). Märgi Sisemine (sisevari), et joonistada vari kasti sisse.
5. Kohanda Eelvaate seadeid (Kasti värv, Taustavärv, Nurga raadius (px)), et näha varju oma tegelike värvide peal. Need mõjutavad ainult eelvaadet.
6. Kopeeri deklaratsioon väljalt CSS-kood nupuga Kopeeri.

Klaviatuur: fookusta paneeli Nihe punkt ja kasuta nooleklahve, et liigutada seda 1 px või Shiftiga 10 px võrra.

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Kuidas box-shadow töötab

Ühe varju süntaks on box-shadow: [inset] x y blur spread color.

• x ja y liigutavad varju paremale ja alla. Negatiivsed väärtused liigutavad seda vasakule ja üles. Valgusallikas elemendi kohal tähendab positiivset y-d.
• Hägu (blur) pehmendab serva. See ei saa olla negatiivne. Hägu 0 annab kasti teravaservalise koopia.
• Laotus (spread) suurendab (positiivne) või vähendab (negatiivne) varju enne selle hägustamist. Negatiivne laotus koos suure y-ga hoiab varju elemendi all, mitte selle ümber.
• Värv on tavaliselt läbipaistev. See tööriist kirjutab läbipaistmatud värvid HEX-koodina ja poolläbipaistvad kujul rgba(), mida mõistavad kõik brauserid. Kui sisestad värvi, millel on juba alfakanal, korrutatakse seda väärtusega Läbipaistmatus (%).
• inset paneb varju äärise sisse, justkui oleks kast lehte surutud.

Vari järgib elemendi border-radius väärtust ega muuda kunagi paigutust: see ei võta ruumi ega tekita kerimisribasid.

Miks kasutada mitut varjukihti?

Päris varjud ei ole üks hägustatud ristkülik. Väike, tume ja tihe vari asub otse eseme all ning suur, hele ja hägune ulatub kaugemale. Kahe kuni viie kihi kombineerimine jäljendab seda ja näeb palju loomulikum välja kui üks raske vari. Eelseade Kihiline kahekordistab igal sammul nihke ja hägu ning kasutab madalat läbipaistmatust, seda võtet on populariseerinud paljud disainisüsteemid. Kõrgus jäljendab Material Designi kolmekihilisi varje.

Loendi esimene kiht maalitakse teiste peale, täpselt nagu CSS-i väärtuses. Järjekord loeb peamiselt siis, kui segad sisemisi ja välimisi varje või kasutad tugevaid värve.

Neumorfism

Neumorfism („pehme kasutajaliides“) kasutab kahte varju elemendil, millel on sama värv mis taustal: tumedat, mis on nihutatud alla ja paremale, ning heledat, mis on nihutatud üles ja vasakule. Eelseade Neumorfism seab mõlemad värvid väärtusele #e0e5ec. Pea meeles, et sellel stiilil on madal kontrast, seega vajavad selle abil tehtud nupud selget fookusolekut ja loetavaid silte.