Hjemmeside » Toolkit » Gratis CSS-kodegenerator for Instagram-Style-filtre

    Gratis CSS-kodegenerator for Instagram-Style-filtre

    Hvor kult ville det være å legge til bildefiltre på nettstedet ditt? For mange år siden ville dette ha krevd JavaScript, men i dag kan du bygge egendefinerte bildefiltre med god gammel HTML og CSS.

    Og med cssFilters webapp trenger du ikke engang å skrive noen av CSS-koden!

    Dette gratis verktøyet hjelper deg med å bygge egendefinerte bildefiltre ved hjelp av CSS3-filtre. Du kan finne mange guider som dekker CSS-filteregenskapen i detalj. Men med cssFilters trenger du ikke å bekymre deg for hvordan alt fungerer, du tilpasser bare innstillingene dine og kopierer koden.

    Øverst på skjermen ser du en lang bar full av tilpassede Instagram-filtre. Disse filtrene inkluderer alle de populære valgene som Hudson, Brødrister, Inkwell, Lofi og mange andre.

    Du klikker bare på hvilket filter du vil ha, og klikker deretter på “CSS-kode” tab i øverste høyre hjørne. Derfra får du både HTML- og CSS-koden. Bare kopier / lim inn på nettstedet ditt, og du er god til å gå.

    Men du kan også tilpasse disse filtrene med innstillingsskyvene. Under “generator” fanen du kan endre innstillinger som metning og kontrast sammen med uskarphet, gråtoner, sepia og til og med overleggsstilen som en lineær gradient eller radial gradient.

    Hver gang du flytter en glidebryter, oppdateres koden automatisk, slik at du ikke trenger å lagre noe.

    Og du kan til og med bytte standardbilde ved å laste opp en fra datamaskinen eller velge en fra Unsplash.

    Denne webappen ble laget av Indrashish Ghosh, og den kjører mange av standardklassene som finnes i CSSgram-biblioteket.

    Men de tilpassede innstillingene går langt utover de grunnleggende forhåndsinnstillingene, og fri kodegenerering gjør dette til et praktisk verktøy for kodere og ikke-kodere. Vi har allerede mange CSS3 generatorer for egenskaper som bakgrunnsgradienter og tekstskygger. Og nå har vi cssFilters som premiere CSS3 bildefiltergenerator.