Lavoro maschera maschera magica con Houdini

Sep 12, 2025
Come si fa
An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Se sei interessato a saperne di più su Houdini, assicurati di partecipare a New York (24-25 aprile). Alla conferenza, è possibile prendere Sam Richard, Enterprise Partner Engineer presso Google, discutendo come Houdini può migliorare notevolmente la flessibilità, il potere, le prestazioni e la manutenibilità dei modelli di progettazione. Per prenotare il tuo biglietto per questa premiata conferenza per i web designer, visita generateconf.com. .

Come sviluppatori, a volte prendiamo per scontato CSS. Cambiando un paio di proprietà, possiamo cambiare lo sguardo di un intero sito web. I venditori del browser stanno facendo un sacco di lavoro per nostro conto per arrivare a quel punto.

Ma come escono nuove funzionalità CSS, può essere un po 'di tempo fino a quando non li usiamo per i siti di produzione. Gli utenti con i vecchi browser saranno bloccati con un insieme di stili declassato e progressivamente migliorato che non sembrano buoni come quelli nei browser moderni.

  • 19 Esempi di animazione Cool CSS per ricreare

Houdini è impostato per cambiare tutto questo. È una raccolta di progetti di specifiche che danno accesso agli sviluppatori ad alcuni dei Dietro-The-Scenes Magic forniti da CSS. Una volta completate tutte le specifiche, gli sviluppatori saranno in grado di utilizzare JavaScript per determinare come vengono eseguiti aspetti come il layout e i calcoli di stile.

Di cosa è capace Houdini?

Houdini è una raccolta di API e specifiche progettate per diminuire l'attrito tra JavaScript e CSS. Esponendo parte della magia che i browser si esibiscono agli sviluppatori, siamo in grado di apportare modifiche alla pagina che funzionano meglio per il nostro caso specifico.

Risolto nel mezzo di questi progressi è il concetto di una worklet: una classe leggera e altamente specializzata focalizzata su azioni specifiche come le animazioni. Sono simili ai lavoratori Web, che vengono eseguiti via dal filo principale e mantengono la pagina reattiva. Questi possono essere ampliati in futuro in quanto le esigenze degli sviluppatori si evolvono.

Mentre alcune di queste API sono ancora nelle loro fasi iniziali, diversi sono ora atterrati sia in cromo che in opera, come rispettivamente V66 e V53. L'API di vernice CSS consente agli sviluppatori di creare immagini in JavaScript per utilizzare ovunque un'immagine sarebbe normalmente utilizzata in CSS, mentre il modello dell'oggetto digitato CSS espone gli oggetti CSS sul tuo JavaScript, piuttosto che semplici stringhe. Il supporto in Safari per queste API è attualmente in fase di sviluppo, molte più API sono in arrivo nelle varie API di Chrome e Houdini stanno lavorando attraverso il processo di specifica del W3C, con l'API della vernice che ha già raggiunto la raccomandazione candidata.

Le bozze di API sono in costante cambiamento e quelle presenti al momento potrebbero non assomigliare a ciò che alla fine atterra nei browser. Tenere d'occhio ishoudinireadyyet.com. rimanere in anticipo agli ultimi miglioramenti.

Vuoi qualcosa di più semplice? Prova a Builder del sito web . Ad ogni modo però, il tuo web hosting Il servizio deve funzionare per te.

Usa Houdini per rimodellare le maschere di immagini

Per il momento, anche l'API della vernice CSS di Houdini è in grado di raggiungere un grande affare. Ad esempio, possiamo combinarlo con maschere di immagini per rimodellare gli elementi su richiesta.

Per mostrare come questo potrebbe funzionare, navigare verso Filelilo. Per accedere ai file pertinenti (anche, assicurati che i tuoi file siano facilmente accessibili a destra deposito cloud. ).

01. Applicare mascheratura CSS

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

Le immagini prima che venga applicata una maschera CSS

Prima di iniziare a creare la worklet, configurare un server locale. Quindi abbiamo bisogno di impostare la maschera su ogni immagine. Mentre la proprietà CSS necessaria è maschera-immagine , è ancora prefissato in cromo. Ciò significa che abbiamo anche bisogno del WebKit. prefisso accanto ad esso.

Aprire stili / maschera.css. e aggiorna gli stili per il mascherato classe. Parte dell'effetto è rivelare completamente l'immagine quando l'utente lo aleggia su di esso. Aggiungere un svelare proprietà personalizzata per l'elemento in quel caso. 

 .Masked {
  [...]
  -Webkit-maschera-immagine: vernice (maschera);
  Immagine a maschera: vernice (maschera);
}
.Masked: Hover, .Masked: focus {
  - Mask-reveal: vero;
}

02. Applicare la proprietà della maschera

Le proprietà personalizzate non devono essere sull'elemento radice da ritirare dall'API. Possono essere applicati all'elemento che viene dipinto a, il che sovrascriverà eventuali selettori con una specificità inferiore.

Ora applicheremo uno speciale maschera-forma Proprietà personalizzata a tre classi di forma. Questo dice alla worklet che la forma di rendering. 

 .Masked.square {
  - Maschera-forma: quadrato;
}
.Masked.circle {
  - Mask-forma: cerchio;
}
.Masked.triangle {
  - Mask-shape: triangolo;
}

03. Definire quale forma da usare

Aperto Script / Mask.js. . Questo è già stato compilato con parte della logica per creare le forme. Abbiamo ancora bisogno di legarlo insieme alle lezioni che abbiamo appena scritto.

Il maschera-forma La proprietà personalizzata definisce la forma che sarà utilizzata. Abbiamo un cerchio, un quadrato o un triangolo tra cui scegliere. Se qualcuno sceglie una forma diversa o nessuna forma, impostazione predefinita a una forma circolare. Tagliare gli spazi lasciati dalla formattazione CSS. 

 Lascia forma = 'cerchio';
if (Properties.get ('- maschera-shape ") & amp; & amp;
  ['Square', 'Triangle', 'Circle']
  .includes (proprietà.get (
  '--Mask-Shape'). Tostring (). Trim ())) {
  forma = proprietà.get (
  '- maschera-forma'). Tostring (). Trim (); }

04. Decidi se rivelare

Per impostazione predefinita, le maschere forniscono il contorno della forma definita. Quando l'utente aleggia su di loro, il svelare La proprietà personalizzata diventa vera, quindi dovrebbe riempire la forma.

I tipi di proprietà personalizzati stanno arrivando in un punto successivo, il che significa per ora a vero Il valore sarà passato come una stringa. Abbina la stringa e imposta una nuova variabile se è impostata. 

 lascia svelare = falso;
if (Properties.get ('- Mask-Reveal') & amp; & amp;
  Proprietà.get.get ('- Mask-Reveal')
  .Tostring (). Trim () == 'true') {
  rivelare = vero; }

05. Trova la lunghezza più piccola

Infine, vogliamo che le forme abbiano lati di uguale lunghezza. Ciò significa che dobbiamo trovare la più piccola della larghezza o dell'altezza dell'immagine e di utilizzare quella lunghezza per calcolare le forme.

Definisci il lunghezza massima variabile per dire il resto del codice che taglia per rendere le forme. Impostare la larghezza della linea del contesto in una proporzione di queste dimensioni per mantenere le cose in scala. 

 Const MaxLength =
  Math.min (geom.width, geom.height);
ctx.linewidth = MaxLength / 25;

Questo articolo è stato originariamente pubblicato su Creative Web Design Magazine Web designer . Iscriviti al web designer .

Vuoi prendere più trucchi 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.

Generare, la premiata Conferenza vincente per i web designer, ritorna a New York il 24 aprile! Clicca sull'immagine per prenotare i biglietti

Interessato ad imparare di più su come Houdini può aggiungere più Oomph ai tuoi disegni? Sam Richard, Enterprise Partner Engineer at Google darà il suo sistema di design di Design Magic con Houdini a Genera New York il 25 aprile, in cui ti insegnerà come può aiutarti a risolvere i problemi del sistema di progettazione comuni e migliorare notevolmente la flessibilità, il potere, prestazioni e manutenabilità di questi modelli.

Generare New York da corsa dal 24 al 25 aprile - Ottieni i tuoi biglietti ora !

Articoli Correlati:

  • Genera New York è tornato per il 2019
  • 14 delle migliori API JavaScript
  • 10 nuovi strumenti di web design per aprile 2019

Come si fa - Articoli più popolari

8 Incredibili tutorial di progettazione grafica

Come si fa Sep 12, 2025

Sia che tu stia appena iniziando in graphic design o un professionista stagionato, c'è sempre qualcosa di nuovo da imparare se vuoi rimanere davanti al gioco. La disciplina del design grafic..

Come creare una pagina comica

Come si fa Sep 12, 2025

Questo tutorial ti mostrerà come creare una pagina comica. Anche se stiamo usando Clip studio vernice Qui, c'è u..

Crea una pagina di destinazione 3D WebGL

Come si fa Sep 12, 2025

(Immagine di immagine: futuro) La creazione di una pagina di destinazione WebGL 3D è un modo per fare una grande pri..

Come creare Digital Plein Air Paintings

Come si fa Sep 12, 2025

Ottieni all'aperto per creare una grande arte (Immagine di credito: Mike Mc Cain) Ci sono così tanti fan..

10 regole per creare moduli Web intuitivi

Come si fa Sep 12, 2025

Nonostante l'evoluzione dell'interazione umana-computer, le forme rimangono ancora uno dei tipi più importanti di interazione pe..

Crea un umano digitale realistico

Come si fa Sep 12, 2025

Potresti conoscere Come disegnare le persone , ma creando un ritratto digitale che è indistinguibile da una fotog..

12 Suggerimenti per l'illuminazione 3D realistica

Come si fa Sep 12, 2025

L'illuminazione è fondamentale in qualsiasi 3D Art. Progetto su cui lavori. A livello più elementare, è un modo..

Crea un personaggio con realismo stilizzato

Come si fa Sep 12, 2025

Flippynormals. È un sito gestito da Henning Sanden e Morten Jaeger insieme ai lavori di giorno in VFX a Londra. Si c..

Categorie