Generator de cod CSS gratuit pentru filtrele Instagram-Style

Cât de cool ar fi să adăugați filtre de imagine pe site-ul dvs.? Cu ani în urmă, acest lucru ar fi necesitat JavaScript, dar în zilele noastre puteți crea filtre de imagine personalizate cu vechi vechi HTML și CSS.

Și cu webapp-ul cssFilters nu trebuie nici măcar să scrieți codul CSS!

Această unealtă gratuită vă ajută să creați filtre de imagini personalizate utilizând filtrele CSS3. Puteți găsi mai multe ghiduri care acoperă în detaliu proprietatea filtrului CSS. Dar cu cssFilters nu va trebui să vă faceți griji cu privire la modul în care funcționează, pur și simplu personalizați setările și copiați codul.

În partea de sus a ecranului veți observa o bară lungă plină de filtre personalizate Instagram. Aceste filtre includ toate opțiunile populare precum Hudson, Toaster, Inkwell, Lofi și multe altele.

Pur și simplu faceți clic pe oricare filtru doriți și apoi faceți clic pe “Cod CSS” în colțul din dreapta sus. De acolo veți obține atât codul HTML, cât și codul CSS. Doar copiați / inserați pe site-ul dvs. și sunteți bine să mergeți.

Dar, de asemenea, puteți personaliza aceste filtre cu glisoarele de setări. Sub “generator” puteți modifica setările precum saturația și contrastul, împreună cu estomparea, tonurile de gri, sepia și chiar stilul suprapus, cum ar fi un gradient liniar sau un gradient radial.

De fiecare dată când mutați un cursor, acesta actualizează automat codul, astfel încât să nu trebuie să salvați nimic.

Și puteți chiar să schimbați imaginea implicită încărcând unul de pe computerul dvs. sau selectând unul din Unsplash.

Acest webapp a fost realizat de Indrashish Ghosh și rulează multe din clasele implicite găsite în biblioteca CSSgram.

Dar setările personalizate depășesc cu mult presetările de bază, iar generarea de coduri libere face ca acest lucru să devină un instrument la îndemână atât pentru codoare, cât și pentru non-codoare. Avem deja multe generatoare CSS3 pentru proprietăți precum gradiente de fond și umbre de text. Și acum avem cssFilters ca premiera CSS3 generatorul de filtre de imagine.