Arbeta bildmask magi med houdini

Sep 11, 2025

Hur

An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Om du är intresserad av att lära dig mer om Houdini, se till att du ska delta generera New York (24-25 april). På konferensen kan du fånga Sam Richard, Enterprise Partner Engineer på Google, diskutera hur Houdini kan förbättra flexibiliteten, makt, prestanda och underhåll av designmönster. För att boka din biljett till den här prisbelönta konferensen för webbdesigners, besök generateconf.com .

Som utvecklare tar vi ibland CSS för givet. Genom att ändra ett par fastigheter kan vi ändra utseendet på en hel webbplats. Browser leverantörer gör mycket arbete på vår vägnar för att komma till den tiden.

Men när nya CSS-funktioner kommer ut, kan det vara ett tag tills vi får använda dem för produktionsställen. Användare med gamla webbläsare kommer att fastna med en nedgraderad, gradvis förbättrad uppsättning stilar som inte ser så bra ut som de i moderna webbläsare.

19 COOL CSS Animationsexempel för att återskapa

Houdini är inställd att ändra allt det. Det är en samling utkast till specifikationer som ger utvecklare tillgång till några av de bakom-scenes magiska som tillhandahålls av CSS. När alla specifikationer är färdiga kommer utvecklarna att kunna använda JavaScript för att bestämma hur aspekter som layout och stilberäkningar utförs.

Vad är houdini som kan?

Houdini är en samling API och specifikationer som är utformade för att minska friktionen mellan JavaScript och CSS. Genom att utsätta några av den magi som webbläsare utför utvecklare kan vi göra justeringar till den sida som fungerar bäst för vårt specifika användningsfall.

Fast i mitten av dessa framsteg är begreppet ett arbetslås - en lätt, högspecialiserad klass som är inriktad på specifika åtgärder som animationer. De liknar webbledarbetare, som utförs från huvudgängan och håller sidan mottaglig. Dessa kan expanderas i framtiden, eftersom utvecklarna utvecklas.

Medan några av dessa API är fortfarande i sina tidiga skeden, har flera nu landat i både krom och opera, respektive V66 respektive V53. CSS-färg API gör det möjligt för utvecklare att skapa bilder i JavaScript för användning varhelst en bild normalt skulle användas i CSS, medan den CSS-typade objektmodellen exponerar CSS-objekt till ditt JavaScript, snarare än bara strängar. Stöd i safari för dessa APIs är för närvarande i utveckling, flera API: er på väg i Chrome och Houdinis olika API: er arbetar igenom W3C-specifikationsprocessen, med färgen API som redan har nått kandidatrekommendation.

Utkastet till API: er ständigt förändras och de som är närvarande för tillfället kan inte likna vad så småningom landar i webbläsare. Hålla ett öga på ishoudinireadyyet.com att hålla sig före de senaste förbättringarna.

Vill du ha något enklare? Prova a Website Builder . Hur som helst, din webbhotell Tjänsten behöver arbeta för dig.

Använd Houdini för att omforma bildmasker

För tillfället kan även Houdinis CSS Paint API att uppnå en hel del. Till exempel kan vi kombinera det med bildmasker för att omforma element på begäran.

För att visa hur det här kan fungera, navigera till Filerilo För att komma åt relevanta filer (också, se till att dina filer är lättillgängliga till höger molnlagring ).

01. Applicera Masking CSS

An image showing three images of seascapes, awaiting the application of a CSS mask. — Bilderna innan en CSS-mask appliceras

Innan vi börjar skapa arbetslet, skapa en lokal server. Då måste vi ställa in masken på varje bild. Medan CSS-egenskapen behövs är mask-bild , det är fortfarande prefixat i krom. Det betyder att vi också behöver Webkit prefix bredvid det.

Öppna stilar / mask.css och uppdatera stilarna för maskerad klass. En del av effekten är att helt avslöja bilden när användaren svänger över den. Lägg till en avslöja Anpassad egendom till elementet i det fallet.

 .masked {
  [...]
  -WebKit-Mask-bild: Färg (mask);
  Mask-bild: Färg (mask);
}
.masked: Hover, .masked: Focus {
  - Mask-avslöja: sant;
}

02. Applicera maskformegenskap

Anpassade egenskaper behöver inte vara på rotelementet som ska hämtas av API. De kan tillämpas på det element som är målade till, vilket kommer att åsidosätta några selekter med en lägre specificitet.

Nu ska vi tillämpa en speciell maskform Anpassad egendom till tre formklasser. Detta berättar om arbetspaketet som formar för att göra.

 .masked.square {
  - Maskform: Kvadrat;
}
.masked.circle {
  - Maskform: Cirkel;
}
.masked.triangle {
  - Maskform: triangel;
}

03. Definiera vilken form som ska användas

Öppen Skript / Mask.js . Detta har redan fyllts med lite av logiken för att skapa formerna. Vi behöver fortfarande knyta det tillsammans med de klasser vi bara skrev.

De maskform Anpassad egendom definierar den form som ska användas. Vi har en cirkel, en torg eller en triangel att välja mellan. Om någon väljer en annan form eller ingen form alls, standard till en cirkelform. Trim av eventuella utrymmen som lämnas av CSS-formatering.

 Låt formen = "cirkel";
Om (egenskaper.get ('- Mask-form') & amp; & amp;
  ['Square', 'Triangle', 'Circle']
  .inkluderar (egenskaper.get (
  "- Maskform"). TOSTRING (). Trim ())) {
  Shape = egenskaper.get (
  '- Maskform'). TOSTRING (). Trim (); }

04. Bestäm om du ska avslöja

Som standard ger maskerna konturen av den definierade formen. När användaren svävar över dem, avslöja Anpassad egendom blir sant, så det borde fylla formen i.

Anpassade egendomstyper kommer vid en senare punkt, vilket betyder för nu en Sann Värdet kommer att skickas som en sträng. Matcha mot strängen och ställ in en ny variabel om den är inställd.

 Låt avslöja = falskt;
Om (egenskaper .get ('- Mask-avslöja') & amp; & amp;
  egenskaper .get ('- Mask-avslöja')
  .tosstring (). Trim () == 'sant') {
  avslöja = sant; }

05. Hitta den minsta längden

Slutligen vill vi att formerna ska ha sidor av samma längd. Det betyder att vi måste hitta den minsta av antingen bredden eller höjden på bilden och använda den längden för att beräkna formerna.

Definiera Maxlängd variabel för att berätta resten av koden vilken storlek som gör formerna. Ställ in linjens bredd för sammanhanget till en andel av denna storlek för att hålla sakerna att skala.

 const maxlength =
  Math.min (Geom.Width, Geom.Height);
ctx.linewidth = maxlength / 25;

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Prenumerera på webbdesignern .

Vill du hämta fler Houdini-tricks?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25. — Generera, den prisbelönta konferensen för webbdesigners, återgår till NYC den 24-25 april! Klicka på bilden för att boka biljetter

Intresserad av att lära dig mer om hur Houdini kan lägga till mer oomph till dina mönster? Sam Richard, Enterprise Partner Engineer på Google kommer att ge sitt prat designsystem magi med Houdini på Generera New York den 25 april, där han kommer att lära dig hur det kan hjälpa dig att lösa vanliga designsystemproblem och förbättra flexibiliteten, makten, prestanda och underhåll av dessa mönster.

Generera New York kör från 24-25 april - Få dina biljetter nu !

Relaterade artiklar:

Generera New York är tillbaka för 2019
14 av de bästa Javascript API
10 nya webbdesignverktyg för april 2019

Arbeta bildmask magi med houdini

Vad är houdini som kan?

Använd Houdini för att omforma bildmasker

01. Applicera Masking CSS

02. Applicera maskformegenskap

03. Definiera vilken form som ska användas

04. Bestäm om du ska avslöja

05. Hitta den minsta längden

Vill du hämta fler Houdini-tricks?

Hur - Mest populära artiklar

17 tips för att dra manga ansikten

Kom igång med Grav CMS

Använd Brain.js för att bygga ett neuralt nätverk

Hur man skapar en app med vue.js

Hur man använder webbfonter

Hur man skulpterar en 3D-tryckt goblin

Hur man ritar en våt figur

Hur man skapar en vintermiljö

Kategorier