Gratis CSS-kodegenerator til Instagram-Style-filtre

Hvor cool ville det være at tilføje billedfiltre på dit websted? For mange år siden ville det kræve JavaScript, men i dag kan du opbygge brugerdefinerede billedfiltre med god gammel HTML og CSS.

Og med cssFilters webapp behøver du ikke engang at skrive en CSS-kode!

Dette gratis værktøj hjælper dig med at opbygge brugerdefinerede billedfiltre ved hjælp af CSS3-filtre. Du kan finde mange vejledninger, der dækker CSS filteregenskaben i detaljer. Men med cssFilters behøver du ikke at bekymre dig om hvordan det hele virker, du tilpasser bare dine indstillinger og kopierer koden.

Øverst på skærmen ses en lang stribe fuld af brugerdefinerede Instagram-filtre. Disse filtre omfatter alle de populære valg som Hudson, Brødrister, Inkwell, Lofi og mange andre.

Du klikker bare på hvilket filter du vil have, og klik derefter på “CSS kode” fane i øverste højre hjørne. Derfra får du både HTML og CSS-koden. Du skal bare kopiere / indsætte ind på din hjemmeside, og du er god til at gå.

Men du kan også tilpasse disse filtre med indstillingsskyderne. Under “generator” fanebladet kan du ændre indstillinger som mætning og kontrast sammen med slør, gråtoner, sepia og endda overlay-stilen som en lineær gradient eller radial gradient.

Hver gang du flytter en skyder, opdateres koden automatisk, så du ikke behøver at gemme noget.

Og du kan endda bytte standardbilledet ved at uploade en fra din computer eller vælge en fra Unsplash.

Denne webapp blev lavet af Indrashish Ghosh, og den kører mange af de standardklasser, der findes i CSSgram-biblioteket.

Men de brugerdefinerede indstillinger går langt ud over de grundlæggende forudindstillinger, og fri kodegenerering gør dette til et praktisk værktøj til både kodere og ikke-kodere. Vi har allerede mange CSS3 generatorer til egenskaber som baggrundsgradienter og tekstskygger. Og nu har vi cssFilters som den førende CSS3-billedfiltergenerator.