Arbeidsbilde Mask Magic With Houdini

Feb 2, 2026

hvordan

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

[1. 3]

Hvis du er interessert i å lære mer om Houdini, sørg for at du går på å generere New York (april 24-25). På konferansen kan du fange Sam Richard, Enterprise Partner Engineer på Google, og diskutere hvordan Houdini i stor grad kan forbedre fleksibiliteten, kraften, ytelsen og vedlikeholdets designmønstre. For å bestille billetten til denne prisbelønte konferansen for webdesignere, besøk GenerateConf.com. .

Som utviklere tar vi noen ganger CSS for gitt. Ved å endre et par eiendommer, kan vi endre utseendet på et helt nettsted. Browser leverandører gjør mye arbeid på våre vegne for å komme til det punktet.

Men som nye CSS-funksjoner kommer ut, kan det være en stund før vi kommer til å bruke dem til produksjonssteder. Brukere med gamle nettlesere vil bli sittende fast med et nedgradert, gradvis forbedret sett med stiler som ikke ser like bra ut som de i moderne nettlesere.

19 Cool CSS animasjonseksempler for å gjenskape

Houdini er satt til å endre alt det. Det er en samling av utkastspesifikasjoner som gir utviklere tilgang til noen av de bak-scenene magiske levert av CSS. Når alle spesifikasjonene er komplette, vil utviklere kunne bruke Javascript for å avgjøre hvordan aspekter som layout og stilberegninger utføres.

Hva er Houdini i stand til?

Houdini er en samling av APIer og spesifikasjoner som er utformet for å redusere friksjonen mellom JavaScript og CSS. Ved å utsette noen av de magiske som nettlesere utfører utviklere, kan vi gjøre justeringer til siden som fungerer best for vår spesifikke bruksfall.

Fast i midten av disse fremskrittene er konseptet med en arbeidslet - en lett, høyt spesialisert klasse fokusert på bestemte handlinger som animasjoner. De ligner på webarbeidere, som utfører vekk fra hovedtråden og holder siden responsive. Disse kan utvides i fremtiden som behovene til utviklere utvikler seg.

Mens noen av disse APIene fortsatt er i sine tidlige stadier, har flere nå landet i både krom og opera, som henholdsvis V66 og V53. CSS Paint API gjør det mulig for utviklere å lage bilder i JavaScript for bruk, uansett hvor et bilde normalt vil bli brukt i CSS, mens CSS-typet objektmodellen eksponerer CSS-objekter til JavaScript, i stedet for bare strenger. Støtte i Safari for disse APIene er for tiden i utvikling, flere APIer er på vei i Chrome, og Houdinis ulike APIer jobber seg gjennom W3C-spesifikasjonsprosessen, med malingen API som allerede har nådd kandidatanbefaling.

Utkastet til APIer endres stadig, og de tilstedeværende for øyeblikket kan ikke ligne det som til slutt lander i nettlesere. Holde et øye med ishoudinireadyyet.com. å holde seg foran de siste forbedringene.

Vil du ha noe enklere? Prøv A. Nettstedbygger . Uansett, skjønt, din Web Hosting. Tjenesten må jobbe for deg.

Bruk Houdini til å omforme bildemasker

For tiden er bare bare Houdinis CSS-maling API i stand til å oppnå mye. For eksempel kan vi kombinere det med bildemasker for å omforme elementer på forespørsel.

Å vise hvordan dette kan fungere, naviger til Filsilo. For å få tilgang til de relevante filene (sørg også for at filene dine er lett tilgjengelige i høyre side skylagring ).

01. Påfør maskering CSS

An image showing three images of seascapes, awaiting the application of a CSS mask. — Bildene før en CSS-maske brukes

Før vi begynner å lage arbeidslivet, konfigurerer du en lokal server. Da må vi sette masken på hvert bilde. Mens CSS-egenskapen trengs er maske-image , det er fortsatt prefiks i krom. Dette betyr at vi også trenger Webkit. prefiks sammen med den.

Åpne opp Stiler / Mask.CSS og oppdater stilene for maskert klasse. En del av effekten er å avsløre bildet fullt ut når brukeren svinger over den. Legg til en avsløre tilpasset eiendom til elementet i den forekomsten.

 .masked {
  [...]
  -Webkit-mask-image: maling (maske);
  maskebilde: maling (maske);
}
.masked: svinger, .masked: fokus {
  --Mask-avsløre: sant;
}

02. Påfør Mask Shape Property

Tilpassede egenskaper trenger ikke å være på rotelementet som skal hentes av API. De kan påføres elementet som blir malt til, noe som vil overstyre eventuelle selgere med en lavere spesifisitet.

Nå skal vi søke en spesiell maskeform Tilpasset eiendom til tre formklasser. Dette forteller arbeidet som form for å gjengi.

 .masked.square {
  --Mask-form: kvadrat;
}
.masked.circle {
  --Mask-form: sirkel;
}
.masked.tririangle {
  --Mask-form: trekant;
}

03. Definer hvilken form som skal brukes

Åpen Skript / mask.js. . Dette har allerede blitt fylt ut med noen av logikken for å lage figurene. Vi trenger fortsatt å knytte det sammen med klassene vi nettopp skrev.

De maskeform Tilpasset eiendom definerer formen som skal brukes. Vi har en sirkel, en firkant eller en trekant å velge mellom. Hvis noen velger en annen form eller ingen form i det hele tatt, standard til en sirkelform. Trim av eventuelle mellomrom som er igjen av CSS-formatering.

 La form = 'sirkel';
hvis (properties.get ("- mask-form") & amp;
  ['Square', 'Triangle', 'Circle']
  . Inkluderer (egenskaper.get (
  '--Mask-form'). Tostring (). Trim ())) {
  form = properties.get (
  '--Mask-form'). Tostring (). Trim (); }

04. Bestem om å avsløre

Som standard gir maskerne oversikten over den definerte formen. Når brukeren svinger over dem, avsløre Tilpasset eiendom blir sant, så det skal fylle formen i.

Tilpassede eiendomstyper kommer på et senere tidspunkt, noe som betyr for nå en ekte Verdien vil bli bestått som en streng. Match mot strengen og sett en ny variabel hvis den er angitt.

 La avsløre = false;
hvis (properties.get ("- mask-avsløre") & amp;
  Properties.get ('- Mask-Reveal')
  .Tostring (). Trim () == 'sant') {
  avsløre = sant; }

05. Finn den minste lengden

Til slutt vil vi at former skal ha sider av like lengde. Dette betyr at vi må finne den minste av enten bredden eller høyde på bildet og bruke den lengden for å beregne figurene.

Definer den maks lengde variabel for å fortelle resten av koden hvilken størrelse for å lage figurene. Sett linjebredden på konteksten til en andel av denne størrelsen for å holde ting i skala.

 Const MaxLength =
  Math.Min (Geom.width, Geom.Height);
ctx.linewidth = maxlength / 25;

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner . Abonner på webdesigner .

Vil du plukke opp flere Houdini-triks?

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. — Generer, den prisbelønte konferansen for webdesignere, returnerer til NYC den 24-25 april! Klikk på bildet for å bestille billetter

Interessert i å lære mer om hvordan Houdini kan legge til mer OOMPH til designene dine? Sam Richard, Enterprise Partner Engineer på Google vil gi sitt snakkesystem Magic med Houdini på Generere New York 25. april, der han vil lære deg hvordan det kan hjelpe deg med å løse vanlige designsystemproblemer og forbedre fleksibiliteten, kraften i stor grad. ytelse og vedlikehold av disse mønstrene.

Generer New York Runs fra april 24-25 - Få dine billetter nå !

Relaterte artikler:

Generer New York er tilbake for 2019
14 av de beste JavaScript-APIene
10 nye webdesign verktøy for april 2019

Arbeidsbilde Mask Magic With Houdini

Hva er Houdini i stand til?

Bruk Houdini til å omforme bildemasker

01. Påfør maskering CSS

02. Påfør Mask Shape Property

03. Definer hvilken form som skal brukes

04. Bestem om å avsløre

05. Finn den minste lengden

Vil du plukke opp flere Houdini-triks?

hvordan - Mest populære artikler

Hvordan historyboard i Photoshop

Hvordan repost på Instagram

Hvordan ta et skjermbilde på en Mac

Hva er inne i vinkel 8?

Hvordan maling som en 1800-talls mester

5 tips for å forbedre VR-kreasjonene

Hvordan legge til morsomme CSS-bakgrunner til nettstedene dine

Bygg komplekse layouter med postcss-flexbox

Kategorier