CSS szinnyomás generátor
CSS box-shadow érték létrehozása eltolásból, elmosódásból, szóródásból és színből, több réteg és előbeállítás segítségével.
CSS szinnyomás generátor
Állítson vízszintes és függőleges eltolást, elmosódási sugarat, szóródási sugarat és színt, és ez az eszköz a megfelelő box-shadow deklarációt állítja össze, ahogy dolgozik. Az mindennapi esetre készült — egy kártya, egy gomb, egy felugró ablak, amely ki kell emelkednie az oldalból — valamint többrétegű árnyékokra, amelyek több árnyékból állnak egymásra halmozva, a technika mögött, amely a lágy, valósághű mélység áll a legtöbb modern tervezési rendszerben.
Az előbeállítás legördülő menü finoman, közepesen és erősen emelvényt kínál, mindegyiknek saját rétegszáma, eltolása és elmosódása már beállított; válassza az egyéni lehetőséget az összes érték saját hajtásához. A rétegek opció azt szabályozza, hány árnyék helyezkedik el: minden hozzáadott réteg növeli az eltolást és az elmosódást az indexe szerint, és fékezi az átlátszóságát, egy egységes lapos árnyékot egy lágy, meggyőző árnyékká alakítva. A befelé opció az árnyékot befelé fordítja a megnyomott elemekhez, az átlátszóság az érték mennyiségét szabályozza, az egység kapcsoló px vagy rem értéket ad ki. Kapcsolja be a sötét módú változatot egy második, erősebb deklarációhoz, amely egy @media (prefers-color-scheme: dark) blokk burkolásában van — egy árnyéknak több átlátszóságra van szüksége, hogy sötét háttérre legyen látható. Válassza, hogy az eredmény egyetlen sorként, egy --box-shadow egyéni tulajdonságként vagy egy .box-shadow osztályként érkezik-e, és adjon hozzá egy megfelelő filter: drop-shadow sort olyan elemekhez, amelyeket a box-shadow nem tud elérni, például egy SVG ikon vagy egy transzparens PNG.
Minden érték egy értelmes tartomány közé van szorítva, és egy fel nem ismert szín alapértelmezés szerint feketére esik vissza, nem pedig sérült CSS-re, így a kimenet mindig tisztán beilleszthető egy stíluslapba.
Minden a böngészőjében fut, ahogy módosítja a vezérlőelemeket — nem szín vagy létrehozott CSS-t semmilyen formában nem küldenek sehova. Másolja az eredményt, töltse le .txt fájlként, vagy küldje el egy másik eszközbe, hogy továbbra is dolgozzon rajta.