Houdiniとのワークイメージマスクマジック

Sep 12, 2025

操作方法

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

Houdiniについてもっと知ることに興味があるなら、あなたがGenerge New York（4月24日から25日）に参加してください。会議では、GoogleでSam Richard Enterprise Partnerエンジニアをキャッチすることができ、Houdiniがデザインパターンの柔軟性、電力、性能、および保守性をどのように向上させることができるかについて説明します。 Webデザイナーのためのこの受賞歴のあるカンファレンスへのチケットを予約するには、訪問 GenerateConf.com 。

開発者として、私たちは時々許可されているためにCSSを取る。いくつかのプロパティを変更することで、Webサイト全体の外観を変更できます。ブラウザのベンダーは、その点に到達するために私達に代わってたくさんの仕事をしています。

しかし、新しいCSS機能が出てくるにつれて、生産現場に使用するようになるまでしばらくすることができます。古いブラウザを持つユーザーは、最新のブラウザと同じように見えないスタイルの格納された、徐々に強化されたスタイルのセットを備えています。

19 Cool CSSアニメーションの例を再現するための例

Houdiniはそれをすべて変更するように設定されています。これは、開発者がCSSによって提供された舞台裏の魔法のいくつかにアクセスすることを提供するドラフト仕様のコレクションです。すべての仕様が完了すると、開発者はJavaScriptを使用して、レイアウトやスタイルの計算などの側面がどのように実行されるかを判断できます。

Houdiniとは何ですか？

Houdiniは、JavaScriptとCSSの間の摩擦を減らすように設計されたAPIと仕様の集まりです。ブラウザが開発者に実行する魔法のいくつかを公開することによって、私たちは私たちの特定のユースケースに最適なページを調整することができます。

これらの進歩の途中で修正されているのは、アニメーションなどの特定の行動に焦点を当てた軽量で高度に専門化されたクラスの概念です。それらはWebワーカーに似ています。これはメインスレッドから逃げ出し、そのページを応答し続けます。開発者の必要性が進化するにつれて、これらは将来拡大することができます。

これらのAPIのいくつかはまだ初期の段階にあるが、それぞれV66およびV53のようにそれぞれChromeとOperaの両方に着地しています。 CSS Paint APIでは、開発者がJavaScriptでイメージを作成することができます。 Safariでのサポートは現在開発中です。これは、ChromeとHoudiniのさまざまなAPIがW3C仕様プロセスを通過している途中でいくつかのAPIが働いています。

ドラフトAPIは絶えず変化しており、現時点で存在するものは、最終的にブラウザに着陸するものには似ていない可能性があります。目を離さない ishoudinireadyyet.com 最新の改善を推進するために。

より単純なものが欲しいですか？お試しください ウェブサイトビルダー 。どちらの方法でも、あなた ウェブホスティング サービスはあなたのために働く必要があります。

Houdiniを使ってイメージマスクを再構築します

当面の間、ちょうどHoudiniのCSS Paint APIでさえ、大いに達成することができます。たとえば、イメージマスクと組み合わせることで、要素をオンデマンドで再構築できます。

これがどのように機能する可能性があるかを示すために、に移動しますファイルイロ関連ファイルにアクセスするには（ファイルが右側にすぐにアクセスできるようにしてください。 クラウドストレージ ）。

01.マスキングCSSを適用します

An image showing three images of seascapes, awaiting the application of a CSS mask. — CSSマスク前の画像が適用されます

ワークレットの作成を開始する前に、ローカルサーバーを設定してください。それから各画像にマスクを設定する必要があります。 CSSプロパティが必要ですが マスク画像 、それはまだChromeに接頭辞められています。これは私達も必要とすることを意味します webkit. それに沿って接頭辞。

open スタイル/ mask.css. そしてTheのスタイルを更新します mask mask クラス。エフェクトの一部は、ユーザーがそれを回っているときに画像を完全に明らかにすることです。 Aを追加 明るくする そのインスタンスの要素へのカスタムプロパティ。

マスク{
  [...]
   - ウェブキットマスクイメージ：ペイント（マスク）;
  マスク画像：ペイント（マスク）;
}
。マスク：ホバー、。マスク：フォーカス{
   - マスク表示：true;

02.マスクシェイププロパティを適用します

カスタムプロパティは、APIによってピックアップされるべきルート要素上にある必要はありません。それらは塗装されている要素に適用することができ、それはより低い特異性を持つセレクタを上書きします。

今、私たちは特別なものを適用します マスク形状 3つの形状クラスへのカスタムプロパティ。これは、レンダリングするための形状を調整することを知らせます。

 .masked.square {
   - マスク形状：正方形。
}
・マスクされた{
   - マスク形状：サークル;
}
.masked.triangle {
   - マスク形状：三角形;

03.どの形状を使用するかを定義します

開いた スクリプト/ mask.js 。これはすでに図形を作成するためにロジックのいくつかで記入されています。私たちはまだ私たちが書いたクラスと一緒に結びつける必要があります。

the マスク形状 カスタムプロパティ使用する予定の形状を定義します。私たちはサークル、正方形または三角形を選択します。誰かが異なる形を選択した場合、またはまったく形がありません、デフォルトは円形になります。 CSSのフォーマットによって残されたスペースを削除します。

 shape = 'circle'を取得します。
if（Properties.get（ ' -  mask-shape'）＆amp;＆amp;
  ['Square'、 'Triangle'、 'Circle']
  。内容（Properties.get（
  ' - マスク・シェイプ'）。toString（）。trim（）））{
  shape = properties.get（
  ' - マスク・シェイプ'）。toString（）。trim（）;

04.明らかにするかどうかを決定します

デフォルトでは、マスクは定義された形状の輪郭を提供します。ユーザーがそれらの上に浮かぶとき、 明るくする カスタムプロパティがtrueになるので、形状を埋める必要があります。

カスタムプロパティタイプは後の時点で来ています。 true 値は文字列として渡されます。文字列と一致し、設定されている場合は新しい変数を設定します。

 exirl = falseに;
if（properties.get（ ' -  mask-revire'）＆amp;＆amp;
  properties.get（ ' -  mask-review'）
  .toString（）。trim（）== 'true'）{
  明らか= true;

05.最小の長さを見つけます

最後に、図形は等しい長さの側面を持たせたいです。これは、画像の幅または高さの最小値を見つけ、その長さを使用して形状を計算する必要があることを意味します。

定義する maxLength. コードをどのサイズにするためのコードの残りの部分を伝えるための変数。物事を拡大縮小するために、コンテキストの線幅をこのサイズの割合に設定します。

 const maxlength =
  math.min（geom.width、geom.height）;
ctx.linewidth = maxlength / 25;

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 Web Designerを購読する 。

もっと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. — Webデザイナーの受賞歴のある会議は、4月24日から25日にNYCに戻ります。画像をクリックしてチケットをクリックしてください

Houdiniがあなたのデザインにどのようにさらに多くのオーンフフを追加することができるかについてもっと多くの学習に興味がありますか？ Sam Richard、Googleのエンタープライズパートナーエンジニアは、4月25日にニューヨークのGenerate New YorkとのTalk Design System Magicを提供しています。これらのパターンの性能と保守性

4月24日から25日までのニューヨークランを生み出す - 今すぐチケットを入手してください ！

関連記事：

ニューヨークを生成することは2019年に帰ってきました
最高のJavaScript APIの14の14
2019年4月の新しいWebデザインツール

Houdiniとのワークイメージマスクマジック

Houdiniとは何ですか？

Houdiniを使ってイメージマスクを再構築します

01.マスキングCSSを適用します

02.マスクシェイププロパティを適用します

03.どの形状を使用するかを定義します

04.明らかにするかどうかを決定します

05.最小の長さを見つけます

もっとHoudiniのトリックを拾いたいですか？

操作方法 - 最も人気のある記事

コミックページを作成する方法

より良い3D世界環境を構築するための10の方法

Photoshopのミキサーブラシをマスター

マスター手続きモデル化

Adobe CCを使って多露光画像を作成する

ZbrushcooreのPolypaint Toolとの3Dメッシュにペイントする

X粒子で葉を成長させることを学ぶ

フロントエンドテストの紹介

カテゴリ