Ingyenes CSS kódgenerátor Instagram-stílusú szűrőkhöz

Milyen hűvös lenne a képszűrők hozzáadása a webhelyére? Évekkel ezelőtt ez már JavaScript-et igényelt volna, de manapság egyedi képszűrőket építhetsz jó régi HTML és CSS segítségével.

És a cssFilters webapp-tel még a CSS kódot sem kell írnia!

Ez az ingyenes eszköz segít a CSS3 szűrők használatával egyedi képszűrők létrehozásában. A CSS szűrő tulajdonságait részletesen megtalálhatja. A cssFilters-nél azonban nem kell aggódnia, hogy ez hogyan működik, egyszerűen testreszabhatja a beállításokat és másolja a kódot.

A képernyő felső részén egy hosszú, egyéni Instagram-szűrővel rendelkező sáv látható. Ezek a szűrők magukban foglalják a Hudson, Toaster, Inkwell, Lofi és sok más népszerű választást.

Egyszerűen kattintson a kívánt szűrőre, majd kattintson a gombra “CSS kód” fül a jobb felső sarokban. Innen mind a HTML, mind a CSS kódot kapjuk. Csak másolja / illessze be a webhelyére, és jó, hogy menjen.

De ezeket a szűrőket is testreszabhatja a beállítás csúszkákkal. Alatt “generátor” lapon módosíthatja az olyan beállításokat, mint a telítettség és a kontraszt, valamint az elmosódott, szürkeárnyalatos, szépia és még az átfedés stílusa is, mint egy lineáris gradiens vagy sugárirányú gradiens.

Minden egyes csúszka mozgatásakor automatikusan frissíti a kódot, így nem kell semmit mentenie.

És az alapértelmezett képet is kicserélheti úgy, hogy feltölti az egyiket a számítógépről, vagy az egyiket az Unsplash-ből választja ki.

Ezt a weblapot az Indrashish Ghosh készítette, és számos CSSgram könyvtárban található alapértelmezett osztályt futtat.

De az egyéni beállítások messze túlmutatnak az alapbeállításokon, és a szabad kód generálás ez egy praktikus eszköz a kódolóknak és a nem kódolóknak egyaránt. Sok CSS3 generátorral már rendelkezünk olyan tulajdonságokkal, mint a háttérgradiensek és a szöveges árnyékok. És most cssFilters van, mint a CSS3 képszűrő generátor.