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 filtereigenschap past grafische effecten zoals vervaging, kleurverschuiving en contrastaanpassing rechtstreeks in de browser toe, zonder dat er een afbeeldingseditor nodig is. Meerdere functies kunnen in één enkele declaratie worden geketend en in volgorde worden toegepast, en zo worden foto-achtige looks zoals vintage, warm en dramatisch gebouwd. Deze tool beheert die keten voor u en voert alleen de functies uit die u hebt gewijzigd, waardoor de CSS schoon blijft.

Alles gebeurt in uw browser De pagina wordt geopend op de Vintage preset; kies een andere preset, verfijn elke functie en kopieer de declaratie Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Hier is de CSS filtergenerator op een warme foto look Klik op de Warm preset en Generated CSS reads filter: helderheid (105%) verzadigd (140%) sepia (25%); met de preview verschuivend naar amber Sleep Blur naar 2px en de lijn wordt filter: vervagen (2px) helderheid (105%) verzadigd (140%) sepia (25%); Klik op Geen, of druk op Reset, en het keert terug naar filter: geen; Omdat de preview een vaste kleur sample is in plaats van je eigen foto, controleer de gekopieerde CSS op de echte afbeelding voordat je deze verzendt.

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-indexvolgorde kan verbreken die eerder werkte Als een filter een lay-out breekt op een manier die niets met uiterlijk te maken heeft, kan dat bijna altijd de reden zijn. Filters zijn grote GPU-acceleratie-functies, blateringsfuncties, zodat het laatst wordt gebloeid