Glasmorfismegenerator

achtergrondfilter: blur() is de CSS-eigenschap achter de matglazen look: een doorschijnend paneel dat alles wat erachter beweegt vervaagt in plaats van alleen maar een egale kleur te laten vervagen. Het probleem is dat de onscherptekwaliteit bijna onmogelijk te beoordelen is op basis van een statisch staal; het leest pas overtuigend als er daadwerkelijk iets onder beweegt, zoals het zal doen op een echte pagina met inhoud, video of een geanimeerde held. Deze generator plaatst de voorbeeldkaart op een echt geanimeerde achtergrond in plaats van een stilstaande achtergrond, dus wat u ziet terwijl u de schuifregelaars sleept, is wat bezoekers daadwerkelijk zullen ervaren.

De achtergrond is een echte CSS-animatie: een groot lineair verloop geschilderd op 400% van de grootte van het element, waarbij @keyframes de achtergrondpositie heen en weer verschuift in een lus - geen JavaScript-animatielus, geen canvas, gewoon dezelfde continue achtergrondpositietechniek die wordt gebruikt in productieheldsecties. Vervaging, tintkleur en dekking, kleur/dekking/breedte van de rand, hoekradius en schaduwzachtheid bepalen allemaal de live-stijlen van de zwevende kaart, en het kopieerbare CSS-vak weerspiegelt exact dezelfde waarden.

Niet elke browser ondersteunt het achtergrondfilter, dus de generator zendt ook een echt @supports not (backdrop-filter: blur(1px))-blok uit - geen symbolisch gebaar, maar een fallback-regel met een eigen achtergrondkleur berekend op basis van uw werkelijke tintdekking. Omdat doorschijnendheid zonder onscherpte er merkbaar slechter uitziet (wat er ook achter zit, wordt zichtbaar door onscherpte), verhoogt de fallback automatisch het alfakanaal boven de door u gekozen tintdekking, en een opmerking in de gegenereerde CSS legt precies uit waarom en met hoeveel.

Alles wordt berekend en weergegeven in uw eigen browser: geen upload, geen account, geen serverretour. Kopieer de CSS zodra de kaart er goed uitziet, zet deze neer op elk element dat u boven een foto, video of verloop wilt plaatsen, en behoud het @supports-blok zodat oudere browsers nog steeds een leesbare, meer ondoorzichtige kaart krijgen in plaats van een nauwelijks zichtbare kaart.