Generatore di codice CSS gratuito per filtri stile Instagram

Quanto sarebbe bello aggiungere filtri di immagine sul tuo sito? Anni fa questo avrebbe richiesto JavaScript, ma al giorno d'oggi è possibile creare filtri di immagine personalizzati con buoni vecchi HTML e CSS.

E con la webapp cssFilters non devi nemmeno scrivere alcun codice CSS!

Questo strumento gratuito ti aiuta a creare filtri di immagine personalizzati usando i filtri CSS3. Puoi trovare molte guide che coprono la proprietà del filtro CSS in dettaglio. Ma con cssFilters non dovrai preoccuparti di come tutto funzioni, semplicemente personalizzi le tue impostazioni e copi il codice.

Nella parte superiore dello schermo noterai una lunga barra piena di filtri Instagram personalizzati. Questi filtri includono tutte le scelte popolari come Hudson, Toaster, Inkwell, Lofi e molti altri.

È sufficiente fare clic sul filtro che si desidera e quindi fare clic su “Codice CSS” scheda nell'angolo in alto a destra. Da lì avrai sia il codice HTML che il codice CSS. Basta copiare / incollare nel tuo sito Web e sei a posto.

Ma puoi anche personalizzare questi filtri con i cursori delle impostazioni. Sotto il “Generatore” scheda è possibile modificare le impostazioni come saturazione e contrasto insieme a sfocatura, scala di grigi, seppia e persino lo stile di sovrapposizione come un gradiente lineare o un gradiente radiale.

Ogni volta che muovi un cursore, aggiorna automaticamente il codice in modo da non dover salvare nulla.

E puoi anche scambiare l'immagine predefinita caricandone una dal tuo computer o sceglierne una da Unsplash.

Questa webapp è stata creata da Indrashish Ghosh e gestisce molte delle classi predefinite trovate nella libreria CSSgram.

Ma le impostazioni personalizzate vanno ben oltre i preset di base e la generazione di codice gratuito lo rende uno strumento utile sia per i programmatori che per i non-programmatori. Abbiamo già molti generatori CSS3 per proprietà come gradienti di sfondo e ombre di testo. E ora abbiamo cssFilters come il principale generatore di filtri d'immagine CSS3.