Imagine de lucru Magic Magic cu Houdini

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

Dacă sunteți interesat să aflați mai multe despre Houdini, asigurați-vă că participați la generarea New York (24-25 aprilie). La conferință, puteți să prindeți Sam Richard, Inginer Partner Enterprise la Google, discutând modul în care Houdini poate îmbunătăți considerabil flexibilitatea, puterea, performanța și întreținerea modelelor de design. Pentru a vă rezerva biletul la această conferință câștigătoare pentru designeri web, vizitați geneterconf.com. .

Ca dezvoltatori, uneori luăm CSS-ul de la sine. Prin schimbarea câtorva proprietăți, putem schimba aspectul unui întreg site web. Furnizorii browserului fac multă muncă în numele nostru pentru a ajunge la acel moment.

Dar, pe măsură ce apar noi caracteristici CSS, poate fi un timp până când vom ajunge să le folosim pentru locurile de producție. Utilizatorii cu browsere vechi vor fi blocate cu un set de stiluri reduse și progresiv, care nu arată la fel de bune ca cele din browserele moderne.

  • 19 exemple de animație CSS cool pentru a recrea

Houdini este setat să schimbe toate astea. Este o colecție de specificații care oferă dezvoltatorilor accesul la unele dintre magia din spatele scenelor furnizate de CSS. Odată ce toate specificațiile sunt complete, dezvoltatorii vor putea utiliza JavaScript pentru a determina modul în care se efectuează aspecte precum aspectul și calculele stilului.

Ce este capabil Houdini?

Houdini este o colecție de API și specificații concepute pentru a reduce frecarea între JavaScript și CSS. Expunând o parte din magia pe care browserele le interpretează dezvoltatorilor, suntem capabili să facem ajustări la pagina care funcționează cel mai bine pentru cazul nostru specific.

Fixat în mijlocul acestor progrese este conceptul de lucru - o clasă ușoară și foarte specializată, axată pe acțiuni specifice, cum ar fi animațiile. Ele sunt similare cu lucrătorii web, care execută departe de firul principal și mențin pagina receptivă. Acestea pot fi extinse în viitor, deoarece nevoile dezvoltatorilor evoluează.

În timp ce unii dintre aceste API sunt încă în stadiile incipiente, mai multe au aterizat acum atât în ​​crom, cât și în operă, ca, respectiv de V66 și V53. API-ul de vopsea CSS permite dezvoltatorilor să creeze imagini în JavaScript pentru utilizare ori de câte ori o imagine ar fi utilizată în CSS, în timp ce modelul de obiect tipărit CSS expune obiectele CSS la JavaScript, mai degrabă decât doar șiruri de caractere. Sprijinul în Safari pentru aceste API este în prezent în curs de dezvoltare, mai multe API-uri sunt pe drum în Chrome, iar diferitele API-uri ale lui Houdini lucrează prin procesul de specificație W3C, cu API-ul vopselei care au atins deja recomandări candidate.

Proiectul API-urilor se schimbă în mod constant, iar cei prezenți în prezent nu seamănă cu ceea ce aterizează în cele din urmă în browsere. Stai cu ochii pe ishoudinireadyyet.com. să rămână înainte de cele mai recente îmbunătățiri.

Vrei ceva mai simplu? Încercați a. Builder de site-uri web . Oricum, totuși, dvs. web hosting Serviciul trebuie să lucreze pentru dvs.

Utilizați Houdini pentru a remodela măști de imagine

Pentru moment, chiar și API-ul CSS al lui Houdini este capabil să realizeze o mare afacere. De exemplu, îl putem combina cu măști de imagine pentru a remodela elemente la cerere.

Pentru a arăta cum ar putea funcționa acest lucru, navigați la Filesilo. Pentru a accesa fișierele relevante (de asemenea, asigurați-vă că fișierele dvs. sunt ușor accesibile în partea dreaptă Stocare in cloud ).

01. Aplicați mascarea CSS

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

Imaginile înainte de o mască CSS sunt aplicate

Înainte de a începe crearea de lucru, configurați un server local. Apoi trebuie să punem masca pe fiecare imagine. În timp ce proprietatea CSS necesară este Masca-imagine. , este încă prefixată în crom. Aceasta înseamnă că avem nevoie, de asemenea, de WebKit. prefix alături de ea.

Deschide Stiluri / Mask.Css. și actualizați stilurile pentru mascat clasă. O parte a efectului este de a dezvălui pe deplin imaginea atunci când utilizatorul se ridică peste el. Adauga o dezvălui Proprietate personalizată la elementul din acea instanță. 


  [...]
  -imagine-imagine-imagine: vopsea (masca);
  Masca-imagine: vopsea (masca);
}
.Masked: Hover, .Masked: Focus {
  - Descoperă: adevărat;
}

02. Aplicați proprietatea de formă masca

Proprietățile personalizate nu trebuie să fie pe elementul rădăcină care urmează să fie preluat de API. Acestea pot fi aplicate elementului care a fost vopsit, ceea ce va suprascrie orice selectori cu o specificitate mai mică.

Acum vom aplica o specială Masca-formă Proprietate personalizată la trei clase de formă. Acest lucru spune lucrul care se formează pentru a face. 

 .Masked.square {
  - formă-formă: pătrat;
}
.scated.circle {
  - formă-formă: cerc;
}
.Masked.griengle {
  - formă-formă: triunghi;
}

03. Definiți ce formă de utilizat

Deschis Scripturi / Mask.js. . Acest lucru a fost deja completat cu o parte din logică pentru a crea formele. Încă mai trebuie să-l legăm împreună cu clasele pe care tocmai le-am scris.

Masca-formă Proprietatea personalizată definește forma care va fi utilizată. Avem un cerc, un pătrat sau un triunghi de ales. Dacă cineva alege o formă diferită sau nici o formă, implicit la o formă de cerc. Îndepărtați toate spațiile rămase prin formatarea CSS. 

 Lăsați forma = "cerc";
dacă (Properties.Get ("- Mask-Forme") & amp;
  [Piața ", triunghiul", "cercul"]
  .include (Proprietăți.get (
  "Forma de memorie"). Tostring (). Trim ())) {
  forma = proprietăți.get (
  "Forma de memorie"). TOSTRING (). Trim (); }

04. Decideți dacă să dezvăluiți

În mod implicit, măștile oferă conturul formei definite. Când utilizatorul se plimbă peste ele, dezvălui Proprietatea personalizată devine adevărată, așa că ar trebui să umple forma în.

Tipurile de proprietăți personalizate vin într-un punct mai târziu, ceea ce înseamnă că acum a Adevărat Valoarea va fi transmisă ca șir. Se potrivește cu șirul și setați o nouă variabilă dacă este setată. 

 lăsați dezvăluirea = falsă;
dacă (Properties.get ("- Mask-Reveall") & amp; & amp;
  Proprietăți.Get ('- Mask-Reveall')
  .TOSTRING (). Trim () == "TRUE") {
  dezvăluit = adevărat; }

05. Găsiți cea mai mică lungime

În cele din urmă, dorim ca formele să aibă laturi de lungime egală. Aceasta înseamnă că trebuie să găsim cel mai mic dintre lățimea sau înălțimea imaginii și să folosim acea lungime pentru a calcula formele.

Definiți. lungime maxima variabilă pentru a spune restul codului ce dimensiune pentru a face formele. Setați lățimea liniei de context la o proporție din această dimensiune, pentru a menține lucrurile la scară. 

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

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Abonați-vă la designerul web .

Doriți să ridicați mai multe trucuri Houdini?

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.

Generați, conferința câștigătoare premiată pentru designerii web, revine la NYC pe 24-25 aprilie! Faceți clic pe imagine pentru a rezerva bilete

Interesați să aflați mai multe despre modul în care Houdini poate adăuga mai mult oomph la desenele dvs.? Sam Richard, inginerul partenerului de întreprindere de la Google, va oferi magia sistemului de design cu Houdini la Generarea New York pe 25 aprilie, în care vă va învăța cum vă poate ajuta să rezolvați problemele de sistem de proiectare și să îmbunătățiți foarte mult flexibilitatea, puterea, puterea Performanța și întreținerea acestor modele.

Generați din New York se desfășoară din 24-25 aprilie - Ia-ți biletele acum Fotografiile!

Articole similare:

  • Generați New York se întoarce pentru 2019
  • 14 dintre cele mai bune api JavaScript
  • 10 noi instrumente de design web pentru aprilie 2019

să - Cele mai populare articole

Compositing în animație: Aflați elementele de bază

să Sep 16, 2025

(Credit Imagine: Design Blackmagic) În acest articol, vom deplasa în arta compoziției pentru 3D. Explorarea a ceea..

Cum de a juca Photoshop într-o imagine

să Sep 16, 2025

(Credit Imagine: Viitor, Matt Smith) Învățând cum să fotografiați pe cineva într-o imagine este o abilitate su..

Adăugați suport multi-limbă la unghiular

să Sep 16, 2025

În acest tutorial vom ajunge prin procesul de a vă face aplicația accesibilă și ușor de utilizat pentru oamenii din întrea..

Cum se creează glazuri cu acuarelă

să Sep 16, 2025

Pentru acest atelier, te voi lua pas cu pas printr-una din picturile mele - acoperind totul de la concept de schiță la ..

5 lucruri pe care nu le-ați știut că puteți face cu HTML

să Sep 16, 2025

Să ne confruntăm cu el, dezvoltarea web poate deveni cu ușurință o mizerie. HTML, CSS și JavaScript. Toți a..

Cum să creați lumi colorate care spun o poveste

să Sep 16, 2025

Imaginat scene care vă lasă cu un sentiment de minune, faceți-vă să doriți să aflați mai multe și să vedeți ce este ch..

Creați un autoportret cu doar 4 culori

să Sep 16, 2025

Auto-portreture este una dintre provocările cele mai pline de satisfacții pe care un artist le poate încerca. Pentru că știm..

Cum să obțineți mai mult din GIF-uri

să Sep 16, 2025

GIF-uri lucrează în cicluri fără sudură, care Rebecca mock. descrie ca "bucla perfectă". Această buclă ar trebui să ș..

Categorii