Voľný generátor kódu CSS pre filtre v štýle Instagram

Aké pohode by bolo pridanie filtrov obrázkov na vaše stránky? Pred rokom to bude vyžadovať JavaScript, ale dnes si môžete vytvoriť vlastné filtre obrázkov s dobrým starým HTML a CSS.

A pomocou webapp cssFilters nemusíte ani písať žiadny kód CSS!

Tento bezplatný nástroj vám pomôže vytvoriť filtre vlastných obrázkov pomocou filtrov CSS3. Nájdete veľa sprievodcov, ktoré pokryjú vlastnosť filtra CSS podrobne. Ale s cssFilters sa nebudete musieť obávať, ako to všetko funguje, stačí prispôsobiť svoje nastavenia a skopírovať kód.

V hornej časti obrazovky si všimnete dlhý panel plný vlastných filtrov Instagram. Tieto filtre zahŕňajú všetky populárne voľby ako Hudson, Toaster, Inkwell, Lofi a mnoho ďalších.

Jednoducho kliknite na ktorý filter chcete a potom kliknite na tlačidlo “CSS kód” v pravom hornom rohu. Odtiaľ dostanete kód HTML aj CSS. Stačí skopírovať / prilepiť na svoje webové stránky a máte radi to.

Tieto filtre však môžete prispôsobiť aj pomocou posúvačov nastavení. Pod “generátor” môžete meniť nastavenia ako sýtosť a kontrast spolu s rozmazaním, odtieňmi šedej, sépiou a dokonca aj štýlom prekrytia, ako je lineárny gradient alebo radiálny gradient.

Pri každom posúvaní posúvača sa automaticky aktualizuje kód, takže nemusíte nič uložiť.

Môžete dokonca vymeniť predvolený obrázok tak, že ho odovzdáte z počítača alebo ho vyberiete z aplikácie Unsplash.

Táto webová aplikácia bola vytvorená Indrashish Ghoshom a spúšťa veľa predvolených tried nachádzajúcich sa v knižnici CSSgram.

Vlastné nastavenia však ďaleko presahujú základné predvoľby a generovanie bezplatných kódov to robí takým praktickým nástrojom pre kodéry a nekódovače. Už máme veľa generátorov CSS3 pre vlastnosti ako gradienty na pozadí a tieň textu. A teraz máme cssFilters ako premiéru generátora CSS3 image filter.