Munka kép maszk mágia Houdini

Sep 12, 2025
kézikönyv
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Ha érdekel, hogy többet tanulsz Houdini-ről, győződjön meg róla, hogy részt vesz New York létrehozásakor (április 24-25). A konferencián a Sam Richard, az Enterprise Partner mérnöke a Google-on, megvitathatja, hogy Houdini hogyan javíthatja a tervezési minták rugalmasságát, teljesítményét, teljesítményét és karbantartását. Foglalja le jegyét erre a díjnyertes konferenciára, a webes tervezőknek, látogasson el generateconf.com .

A fejlesztőként néha a CSS-t megadjuk. Egy pár tulajdonság megváltoztatásával megváltoztathatjuk egy teljes weboldal megjelenését. A böngésző gyártók sok munkát végeznek a nevünkben, hogy elérjék ezt a pontot.

De ahogy az új CSS-funkciók jönnek ki, lehet egy ideig, amíg a termelési helyszíneken használjuk őket. A régi böngészőkkel rendelkező felhasználók elakadnak egy visszaminősített, fokozatosan javított stíluskészletekkel, amelyek nem úgy néznek ki, mint a modern böngészők.

  • 19 Cool CSS animációs példák a létrehozásra

Houdini meg van kapcsolva, hogy megváltoztassa ezt. Ez egy olyan specifikációk tervezetének gyűjteménye, amelyek a fejlesztők számára hozzáférést biztosítanak a CSS által biztosított mögöttes mágiához. Miután az összes specifikáció teljes, a fejlesztők képesek lesznek használni a JavaScriptet annak meghatározására, hogy milyen szempontokat hajtanak végre, mint az elrendezés és a stílusszámítások.

Mi a Houdini?

Houdini az API-k gyűjteménye és a JavaScript és a CSS közötti súrlódás csökkentése érdekében. Azáltal, hogy a böngészőknek a fejlesztők számára elvégzett mágia kimutatásával képesek vagyunk kiigazításokat készíteni az olyan oldalra, amely a lehető legjobban működik a sajátos felhasználásunkhoz.

Ezeknek a fejlesztéseknek a közepén rögzítettek egy munkamenet fogalma - könnyű, rendkívül specializált osztály, amely konkrét intézkedésekre koncentrál, mint például animációk. Hasonlóak a webes munkásokhoz, amelyek távol vannak a fő szálból, és megtartják az oldal érzékenységét. Ezeket a jövőben bővíthetjük, mivel a fejlesztők igényei fejlődnek.

Míg ezek közül néhány API-k még mindig korai szakaszában vannak, több már króm és opera, mint a V66 és a V53. A CSS festék API lehetővé teszi a fejlesztők számára, hogy a képeket a JavaScript alkalmazásra, ahol egy kép rendesen alkalmazott CSS, míg a CSS beírt Object Model kiteszi CSS tárgyak a JavaScript, ahelyett, hogy csak szálakat. A Safari támogatása ezekben az API-k számára jelenleg fejlesztés alatt áll, több API-k is vannak a Chrome-ban, és Houdini különböző API-k a W3C specifikációs folyamaton keresztül dolgoznak, és a festék API már elérte a jelölt ajánlást.

Az API-k tervezete folyamatosan változik, és a jelenleg jelenlévőek nem hasonlítanak arra, hogy mi történik a böngészőkben. Szemmel tart ishoudineReadyyet.com a legújabb fejlesztések előtt maradni.

Szeretne valami egyszerűbbet? Próbáld ki a weboldal építője . Akárhogy is, az Ön web hosting a szolgáltatásnak dolgozni kell az Ön számára.

Használja a Houdini-t a képmaszkok átalakításához

Jelenleg csak Houdini CSS Paint API képes nagyszerű megállapodni. Például kombinálhatjuk azt képmaszkokkal, hogy átformálják az elemeket igény szerint.

Megmutatni, hogy ez hogyan működik, navigálhat Filesilo A megfelelő fájlok eléréséhez (szintén győződjön meg róla, hogy a fájlok könnyen hozzáférhetőek a jobb oldalon felhő tároló ).

01. Alkalmazza a CSS maszkolását

An image showing three images of seascapes, awaiting the application of a CSS mask.

A CSS maszk előtti képeket alkalmazzák

Mielőtt elkezdenénk létrehozni a munkálkodást, állítsa be a helyi kiszolgálót. Ezután be kell állítanunk a maszkot minden képen. Míg a CSS tulajdonság szükséges maszkkép , még mindig előzetesen krómozott. Ez azt jelenti, hogy szükségünk van a Webkit előtag mellett.

Nyit stílusok / maszk.css és frissítse a stílusokat a álarcos osztály. A hatás része az, hogy teljes mértékben felfedje a képet, amikor a felhasználó leborul. Add hozzá a felfed Egyéni tulajdonság az adott elemhez. 

. Masked {
  [...]
  -webkit-maszk-kép: festék (maszk);
  Maszkkép: festék (maszk);
}
.masced: Hover, .masked: fókusz {
  - maszk-felfedje: igaz;
}

02. Alkalmazza a maszk alakú tulajdonságot

Az egyéni tulajdonságok nem kell az API által felvett gyökérelemre. Alkalmazhatók az elemre festett elemre, amely felülbírálja az alacsonyabb specifitású választókat.

Most egy különlegeset fogunk alkalmazni maszk alakú Egyedi tulajdonság három alakú osztályba. Ez megmondja a munkálkodási munkálatnak. 

 .masked.Square {
  - Maszk alakú: négyzet;
}
.masced.circle {
  - Maszk alakú: kör;
}
.masked.triangle {
  - Maszk alakú: háromszög;
}

03. Határozza meg, hogy melyik formát használja

Nyisd ki Scripts / Mask.js . Ezt már kitöltötte néhány logikával, hogy létrehozza az alakzatokat. Még mindig meg kell kötnünk az osztályokat, amit csak írtunk.

A maszk alakú Az egyéni tulajdonság meghatározza a használni kívánt alakot. Van egy kör, egy négyzet vagy háromszög közül. Ha valaki más alakú vagy formájú alakot választ, alapértelmezett kör alakú. Vágja le a CSS formázás által hagyott helyeket. 

 Legyen forma = 'kör';
Ha (Tulajdonságok.get ('- Mask-shape') & amp; & amp;
  ['Square', 'Triangle', 'Circle']
  .includes (tulajdonságok.get (
  "- maszk alakú"). ToString (). Trim ()))) {
  alak = tulajdonságok.get (
  "- maszk alakú"). TOSTRING (). TRIM (); }

04. Döntse el, hogy feltárja-e

Alapértelmezés szerint a maszkok biztosítják a meghatározott forma vázlatát. Amikor a felhasználó átadja őket, a felfed Az egyéni tulajdonság valóra válik, így kitölti az alakot.

Egyedi tulajdonságtípusok jönnek egy későbbi ponton, ami most a igaz az értéket karakterláncként fogják átadni. Illeszkedjen a karakterlánchoz, és állítsa be az új változót, ha be van állítva. 

 Legyen felfedve = hamis;
ha (ingatlan.get ('- maszk-felfedi ") & amp; & amp;
  Tulajdonságok.get ('- maszk-feltárás)
  .tostring (). Trim () == 'true') {
  felfedve = igaz; }

05. Keresse meg a legkisebb hosszúságot

Végül azt szeretnénk, ha az alakok egyenlő hosszúságúak. Ez azt jelenti, hogy meg kell találnunk a legkisebb a kép szélességét vagy magasságát, és ezt a hosszúságot használják az alakzatok kiszámításához.

Meghatároz Maxlength változó, hogy elmondja a kód többi részét, milyen méretű az alakzatok készítéséhez. Állítsa be a kontextus vonalszélességét a méret arányához annak érdekében, hogy a dolgokat skálázni lehessen. 

 CONST MAXLINGH =
  Math.Min (geom.width, geom.height);
ctx.linewidth = MaxLength / 25;

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer . Feliratkozás a webes tervezőre .

Szeretne több Houdini trükköt felvenni?

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.

Generálja, a díjnyertes konferencia webes tervezők számára, Április 24-25. Kattintson a képre a jegyek foglalásához

Érdekli a tanulás többet arról, hogy Houdini hozzátartozhat több OOMPH-t a tervek számára? Sam Richard, Enterprise Partner Engineer a Google-nál a Talk Design System varázslata a Houdini-val a New York-nél április 25-én, amelyben megtanítja Önt, hogyan segíthet megoldani a közös tervezési rendszer problémáit, és nagymértékben javítja a rugalmasságot, a hatalmat, ezeknek a mintáknak a teljesítményének és karbantarthatóságának.

New York létrehozása április 24-25-ig Szerezd meg a jegyeket !

Kapcsolódó cikkek:

  • New York létrehozása 2019-re visszatért
  • A legjobb JavaScript API-k közül 14
  • 10 új webes tervezési eszköz 2019 áprilisában

kézikönyv - Most Popular Articles

A ráncok eltávolítása a Photoshopban

kézikönyv Sep 12, 2025

(Kép hitel: Jason Parnell-Brookes) Ez a bemutató megmutatja, hogyan távolítsa el a ráncokat a Photoshopban. De m..

Hogyan lehet 2D karaktert hozni az élethez VR-ben

kézikönyv Sep 12, 2025

Ha követi a trendeket, nehéz kihagyni, hogy a VR egy másik ébredésen megy keresztül. Ez történt korábban, de ezúttal ki..

Kezdjük a rozsda

kézikönyv Sep 12, 2025

Page 1 of 2: 1 oldal 1 oldal 2. oldal ..

Építsd meg saját WebGL fizikai játékot

kézikönyv Sep 12, 2025

Ez a projekt különböző részekre osztható. A Heroku rövid bevezetését adjuk meg, mutasd meg, hogyan kell használni a fiz..

Hozzon létre egy tökéletesen geometriai logót illusztrátor

kézikönyv Sep 12, 2025

Ebben a röviden Illusztrátor bemutató , tervező Lesz paterson Sétál, hogyan lehet létrehozni..

Rajzoljon egy kutya ceruza portréját

kézikönyv Sep 12, 2025

A PET portrék rajzolásakor nem csak tudnia kell Hogyan kell felhívni az állatokat : A feladat az adott állat ..

Élesítse meg a vázlatos képességeit

kézikönyv Sep 12, 2025

Vázlat egy egyszerű, de hatékony eszköz bárki számára, aki részt vesz a digitális termékek készítésében. A tollak, a papír és a táblák könnyen hozzáférhetők ..

Első lépések az Amazon Lumberyardban: Beállítás

kézikönyv Sep 12, 2025

Az Amazon új játékmotorja, Fatelep , ingyenes és nagyszerű mindenkinek, akinek a játék és az eszközteremt..

Kategóriák