Työkuvan naamio taikuutta Houdini

Sep 13, 2025

Miten tehdään

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

Jos olet kiinnostunut oppimaan enemmän Houdini, varmista, että osallistut New York (24-25 huhtikuu). Konferenssissa voit Catch Sam Richard, Enterprise Partner Insinööri Googlessa keskustelee siitä, miten Houdini voi suuresti parantaa suunnittelumallien joustavuutta, voimaa, suorituskykyä ja ylläpidettävyyttä. Voit varata lippu tähän palkittuun konferenssiin web-suunnittelijoille, vierailu generateconf.com .

Kehittäjinä käytämme joskus CSS: n itsestäänselvyytenä. Muuttamalla muutamia ominaisuuksia voimme muuttaa koko verkkosivuston ulkoasua. Selaimen toimittajat tekevät paljon työtä meidän puolestamme päästä tähän kohtaan.

Mutta kun uudet CSS-ominaisuudet tulevat ulos, se voi olla jonkin aikaa, kunnes pääsemme käyttämään niitä tuotantolaitoksille. Vanhojen selainten käyttäjät ovat jumissa alentuneella, asteittain tehostetuilla tyyleillä, jotka eivät näytä yhtä hyviä kuin nykyaikaisissa selaimissa.

19 Cool CSS-animaatioesimerkkejä uudelleen

Houdini on asetettu muuttamaan kaiken. Se on kokoelma eritelmiä, jotka antavat kehittäjille pääsyn joitain CSS: n tarjoamia takaa-kohtauksia. Kun kaikki eritelmät ovat valmiit, kehittäjät voivat käyttää JavaScriptin määrittämään, miten asettelu ja tyyli laskelmat suoritetaan.

Mitä Houdini pystyy?

Houdini on kokoelma AP: tä ja eritelmiä, jotka on suunniteltu vähentämään JavaScriptin ja CSS: n kitkaa. Altimalla joitakin taikaisimia, joita selaimet tekevät kehittäjille, voimme tehdä muutoksia sivulle, joka toimii parhaiten erityiskäyttöön.

Kiinteät keskellä näitä edistysaskeleita on työpäivän käsite - kevyt, erittäin erikoistunut luokka, joka keskittyy tiettyihin toimiin, kuten animaatioihin. Ne ovat samanlaisia kuin web-työntekijät, jotka suorittavat pois päältä ja pitävät sivun reagoivana. Näitä voidaan laajentaa tulevaisuudessa kehittäjien tarpeet kehittyvät.

Vaikka jotkin näistä API: stä ovat edelleen varhaisissa vaiheissa, useat ovat laskeutuneet sekä kromille että oopperaan V66: sta ja V53: sta. CSS Paint API: n avulla kehittäjät voivat luoda kuvia JavaScript-laitteessa, missä tahansa kuvasta käytetään normaalisti CSS: ssä, kun taas CSS-kirjoitettu objekti malli paljastaa CSS-esineitä JavaScriptisi sijaan vain merkkijonoihin. Näiden sovellusliittymien safarin tuki on tällä hetkellä kehitteillä, useita sovellusliittymiä on matkalla, että Chrome ja Houdinin eri API: t toimivat tiensä W3C-spesifikaatioprosessin kautta, kun maali API on jo saavuttanut ehdokas suosituksen.

API-ehdotus muuttuu jatkuvasti ja tällä hetkellä ne eivät voi muistuttaa, mikä lopulta laskeutuu selaimissa. Pitää silmällä ishoudinireadyet.com pysyä viimeisimpien parannusten edessä.

Haluatko jotain yksinkertaisempaa? Kokeile a Verkkosivuston rakentaja . Kummassakin tapauksessa, vaikka sivujen ylläpito Palvelun on toimittava sinulle.

Käytä Houdinia muokataksesi kuvan naamioita

Toistaiseksi jopa vain Houdinin CSS-maali API pystyy saavuttamaan paljon. Esimerkiksi voimme yhdistää sen kuvan naamioilla muokata elementtejä pyynnöstä.

Näyttää, miten tämä voisi toimia, siirry kohtaan Filesilo Voit käyttää asiaa koskevia tiedostoja (varmista myös, että tiedostot ovat helposti saatavilla oikealla pilvivarasto ).

01. Käytä Masking CSS: tä

An image showing three images of seascapes, awaiting the application of a CSS mask. — Kuvat ennen CSS-maskin käyttöä

Ennen kuin aloitamme työn luomisen, perustaa paikallinen palvelin. Sitten meidän on asetettava naamio jokaiseen kuvaan. Vaikka tarvittavat CSS-ominaisuus on naamiokuva , se on edelleen etukäteen Chrome. Tämä tarkoittaa myös, että tarvitsemme WebKit etuliite sen rinnalla.

Avata Tyylit / Mask.css ja päivitä tyylejä naamioitu Luokka. Osa vaikutus on täysin paljastaa kuva, kun käyttäjä leijuu sen yli. Lisää paljastaa Mukautettu ominaisuus elementtiin kyseisessä tapauksessa.

 .Maskted {
  [...]
  -WebKit-mask-kuva: maali (maski);
  Mask-kuva: maali (maski);
}
.Maskted: Hover, .Maskted: Focus {
  - Vähentää: Todellinen;
}

02. Käytä maskin muotoa omaisuutta

Mukautettujen ominaisuuksien ei tarvitse olla juurialuetta, jota API: n noutaa. Niitä voidaan soveltaa maalattavan elementtiin, joka ohittaa kaikki valikot alemmilla spesifisyydellä.

Nyt aiomme soveltaa erityistä mask-muoto Mukautettu kiinteistö kolmeen muotoiluokkaan. Tämä kertoo työstä, joka muotoilee.

 .Maskted.square {
  - Muoto: neliö;
}
.Maskted.circle {
  - Muoto: ympyrä;
}
.Maskted.triangle {
  - Muoto: Triangle;
}

03. Määritä, mikä muoto käyttää

Avata Scripts / mask.js . Tämä on jo täytetty joidenkin logiikan luomiseksi muodot. Meidän on vielä sitoa se yhteen luokkien kanssa, jotka juuri kirjoitti.

The mask-muoto Mukautettu ominaisuus määrittää muodon, jota käytetään. Meillä on ympyrä, neliö tai kolmio, jonka haluat valita. Jos joku valitsee eri muodon tai ei mitään muotoa, oletus ympyrän muotoon. Leikkaa kaikki CSS-muotoilun jäljellä olevat tilat.

 Anna muoto = 'ympyrä';
Jos (ominaisuudet.get ("- maskin muoto") & amp; & amp;
  ['Square', 'Triangle', 'Circle']
  . Sisältää (ominaisuudet.Get (
  "-Mask-muoto"). Tostring (). Trim ())) {
  muoto = ominaisuudet.get (
  "-Mask-muoto"). Tostring (). Trim (); }

04. päättää paljastaako

Oletusarvoisesti naamiot tarjoavat määritellyn muodon ääriviivat. Kun käyttäjä leijuu niiden yli, paljastaa Mukautettu omaisuus tulee totta, joten sen pitäisi täyttää muoto.

Mukautetut kiinteistötyypit tulevat myöhemmin, mikä tarkoittaa nyt a totta Arvo siirretään merkkijonona. Sovita merkkijonoa ja aseta uusi muuttuja, jos se on asetettu.

 Anna paljastaa = väärä;
Jos (ominaisuudet.Get ("- maski-paljastavat") & amp; & amp;
  Ominaisuudet.Get ('- Mask-Review')
  .Tostring (). Trim () == "TRUE") {
  paljastaa = totta; }

05. Etsi pienin pituus

Lopuksi haluamme, että muodot ovat yhtä pitkiä. Tämä tarkoittaa sitä, että meidän on löydettävä pienin joko kuvan leveys tai korkeus ja käytä tätä pituutta muotojen laskemiseksi.

Määritä Maksimi pituus Muuttuja kertoa loput koodista, mitä kokoa muodostuu. Aseta kontekstin linjan leveys suhteessa tähän kokoon pitämään asiat mittakaavassa.

 const maxlength =
  Math.min (geom.width, geom.height);
ctx.linewidth = maxlength / 25;

Tämä artikkeli julkaistiin alun perin Creative Web Design Magazine Nettisivujen suunnittelija . Tilaa web-suunnittelija .

Haluatko noutaa enemmän Houdini-temppuja?

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. — Generate, palkittu konferenssi web-suunnittelijoille, palaa NYC: hen 24-25! Klikkaa kuvaa varata lippuja

Kiinnostaako oppia lisää siitä, miten Houdini voi lisätä lisää Omphia malleihisi? Sam Richard, Enterprise Partner Insinööri Googlessa antaa Talk Design System Magic Houdinin kanssa Generate New Yorkissa 25. huhtikuuta, jossa hän opettaa sinulle, miten se voi auttaa sinua ratkaisemaan yhteiset suunnittelujärjestelmän ongelmat ja parantaa suuresti joustavuutta, voimaa näiden kuvioiden suorituskyky ja ylläpitävyys.

Luo New York Runsilta 24-25 - Hanki liput nyt !

Aiheeseen liittyvät artikkelit:

Luo uusi York on palannut vuodelle 2019
14 parhaista JavaScript Apis
10 uutta web-suunnittelutyökalua huhtikuussa 2019

Työkuvan naamio taikuutta Houdini

Mitä Houdini pystyy?

Käytä Houdinia muokataksesi kuvan naamioita

01. Käytä Masking CSS: tä

02. Käytä maskin muotoa omaisuutta

03. Määritä, mikä muoto käyttää

04. päättää paljastaako

05. Etsi pienin pituus

Haluatko noutaa enemmän Houdini-temppuja?

Miten tehdään - Suosituimmat artikkelit

Kuinka nopeuttaa ja optimoida WordPress-sivustoja

Digitaalisten Plein Air Maalausten luominen

Kuinka suunnitella CSS-muotoja: Johdanto

Master Suuret ympäristöt 3DS max

8 Essential WordPress Security Secrets

Täydelliset prototyypit ja käsilaukun mallit, joissa on ihme

Välimuisti BBC: n suorituskyvyn tehostimessa

Tee typografinen juliste Adobe InDesignilla

Luokat