Ilmainen CSS-koodigeneraattori Instagram-tyylisuodattimille

Kuinka siistiä olisi lisätä kuvasuodattimia sivustoosi? Vuosia sitten tämä olisi vaatinut JavaScriptiä, mutta nykyään voit rakentaa mukautettuja kuvasuotimia hyvällä vanhalla HTML: llä ja CSS: llä.

Ja cssFilters webappin kanssa sinun ei tarvitse edes kirjoittaa mitään CSS-koodia!

Tämä ilmainen työkalu auttaa sinua luomaan mukautettuja kuvasuotimia CSS3-suodattimien avulla. Löydät monia oppaita, jotka kattavat CSS-suodattimen ominaisuuden yksityiskohtaisesti. Mutta cssFiltersilla sinun ei tarvitse huolehtia siitä, miten kaikki toimii, voit muokata asetuksiasi ja kopioida koodin.

Näytön yläosassa on pitkä baari, joka on täynnä mukautettuja Instagram-suodattimia. Nämä suodattimet sisältävät kaikki suosittuja vaihtoehtoja, kuten Hudson, Toaster, Inkwell, Lofi ja monet muut.

Napsauta vain haluamaasi suodatinta ja napsauta sitten “CSS-koodi” välilehti oikeassa yläkulmassa. Sieltä saat sekä HTML- että CSS-koodin. Kopioi / liitä sivustoosi ja olet hyvä mennä.

Voit myös muokata näitä suodattimia asetusten liukusäätimillä. Alla “generaattori” välilehdellä voit muuttaa asetuksia, kuten kylläisyyttä ja kontrastia, sekä hämärtää, harmaasävyä, seepiaa ja jopa peittokuvaa, kuten lineaarista kaltevuutta tai säteittäistä kaltevuutta.

Aina kun siirrät liukusäädintä, se päivittää koodin automaattisesti, joten sinun ei tarvitse tallentaa mitään.

Voit myös vaihtaa oletuskuvan siirtämällä sen tietokoneesta tai valitsemalla sen Unsplash-ohjelmasta.

Tämän webappin teki Indrashish Ghosh ja se suorittaa useita CSSgram-kirjastossa olevia oletusluokkia.

Mutta mukautetut asetukset ylittävät perusasetukset, ja vapaan koodin muodostaminen tekee siitä kätevän työkalun koodereille ja ei-koodereille. Meillä on jo useita CSS3-generaattoreita ominaisuuksia, kuten taustakäyrät ja tekstivarjot. Ja nyt meillä on cssFilters ensi-iltana CSS3-kuvasuodattimena.