CSS-filtergenerator

De CSS Filter Generator is een visuele editor voor de CSS filter eigenschap U verplaatst een schuifregelaar voor elke filter functie - vervagen, helderheid, contrast, verzadiging, grijswaarden, sepia, inverteren, tint-roteren, en dekking - en kijk hoe het effect van toepassing is op een voorbeeld in realtime, dan kopieer de exacte CSS het produceert.

De eigenschap Filter past grafische effecten toe zoals vervaging, kleurverschuiving en contrastaanpassing direct in de browser, zonder dat er geen afbeeldingseditor nodig is. Meerdere functies kunnen in één verklaring worden geketend en in volgorde worden toegepast, zo worden fotostijl eruitziet zoals vintage, warm en dramatisch worden gebouwd. Deze tool beheert die keten voor u en voert alleen de functies uit die u daadwerkelijk hebt gewijzigd, waardoor de CSS schoon blijft.

Alles gebeurt in uw browser. Begin met een voorinstelling zoals Vintage of Grayscale, stel elke functie fijn af en kopieer de declaratie. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Filters zijn van toepassing in de volgorde geschreven, en de volgorde verandert het resultaat: grijswaarden dan sepia is niet hetzelfde als sepia dan grijswaarden, omdat de eerste de kleur verwijdert die de tweede zou kleuren De gotcha die de moeite waard is om te weten is eerder structureel dan visueel Elk element met een ander filter dan geen wordt een bevattende blok voor zijn vaste en absoluut gepositioneerde nakomelingen, dus een dropdown of modal binnen een gefilterde ouder zal zichzelf tegen die ouder positioneren in plaats van de viewport Het creëert ook een nieuwe stapelcontext, die de z-index-volgorde kan verbreken die eerder werkte Als een filter een lay-out doorbreekt op een manier die niets met uiterlijk te maken heeft, blijft dat bijna altijd de reden. Filters zijn grote GPU-versnelde browsers, maar op de meeste bladerelementen.