動作中のCSS、SVG、キャンバスマスクの10のすばらしい例

公開: 2021-02-09

あなたはSVGマスクでいくつかの驚くべきことをすることができます。この手法は何年も前から存在していますが、最近になって主流のWeb開発に採用されました。

私はウェブを調べて、カスタムクリッピングマスクとSVG /キャンバスマスクの以下のデモを見つけました。これらの例は、Web上でマスクをどこまでプッシュできるか、そして最終的には今後開発者に何を提供できるかを示しています。

1.テキストマスキング

動作中のテキストマスキングのきれいな例については、上記のペンをチェックしてください。 HTMLの実際のページテキストを使用するため、このテキストを簡単に変更して、好きなように読むことができます。

すべての魔法は、background-clipなどのプロパティを持つCSSで発生します。これらはどのページのほとんどすべてのテキストに適用できますが、背景がはっきりしていないと表示されません。

ズーム効果も純粋にCSSで作成されるため、このコードスニペットはさらに印象的です。

2.カットアウトマスクポリゴン

このペンは複雑なアニメーションにJavaScriptを使用しますが、すべてのマスキングはキャンバス要素を介して処理されることに注意してください。これは驚くほど複雑なアイデアなので、コードに沿って従おうとするのは難しいでしょう。

しかし、上記のポリゴンマスキング効果は、私が見た中で最もユニークなデザインの1つです。 CSSで設計された形状を取り、JavaScriptを使用して、背景画像をマスクするためのページ要素としてこれらの形状を作成します。

これは一貫したアニメーションを実行し、SVG / XMLコンテンツのコンテナーのように動作するJSを利用したCanvas要素で実行されます。かなりクレイジーなものですが、マスクが何をすることができるかを見るのは楽しいです！

3.画像マスキング

このカットアンドドライの例は、CSSイメージマスクがどのように見えるかを示しています。ヴィンセント・デ・オリベイラが作成した上記のイメージマスクの前後を見ることができます。

実際の黒いテクスチャマスクは単なるPNGファイルであることに注意してください。ただし、CSSで画像の上に動的に重ねて、マスクされた写真効果を作成します。

透明度を使用してエクスポートする限り、任意のテクスチャでこれを行うことができます。 maskプロパティには多くの詳細があり、.svgファイルをサポートしていますが、PNGから始める方が簡単な場合があります。

4.ボタンホバー

ボタンのホバー効果をカスタマイズすることを考えたことはありますか？このコードスニペットは、少しの創造性とCSSマスキングでできることを証明しています。

この場合も、コードはすべて事前定義された画像マスクで実行され、各ボタンには独自のマスク効果があります。最もクールな部分は、マスクを表示するだけでなく、マスクをアニメーション化して表示するホバーアニメーションです。

これは確かに実験的なコードですが、WebKitブラウザーでは驚異的に見え、この手法が数年以内に定番になることを願っています。

5.SVGテキストマスク

これは、開発者のMarcoBarriaによって作成されたテキストマスク効果のわずかに異なる例です。

この定義のカスタムSVGイメージの代わりに、コードは実際にSVG要素を使用します。プレーンなHTMLテキストコンテンツの上に構築されていますが、動的なSVGフィルターで実行されます。

これはもう少し技術的ですが、開発者により多くの制御を与えることにもなります。 IllustratorをいじってSVGファイルを作成する代わりに、HTMLドキュメントにインラインSVGを直接コーディングできます。

6.キャンバステキストマスク

Calvin Davisによるこのキャンバスの例では、コンテンツに生のHTMLが使用されていますが、テキスト自体は選択できません。

代わりに、DOMの外部でテキストを抽象化できるCanvas要素を使用してページにレンダリングされます。これにより、画像のように動作するため、テキストが背景を覆い隠すこの効果が表示されますが、テキストのようには感じられません。

使い勝手が悪いためにこれを好まないデザイナーもいるので、選択可能なテキストが必要な場合は、この設定を気にしないでください。

しかし、これは、キャンバスの形を使ってタイポグラフィをどこまでプッシュできるかを示すクールな例です。

7.アニメーショングラデーション

もう1つの非常にクールなテキスト効果は、開発者のSvanteRichterによって作成されたこのアニメーショングラデーションです。

HTMLページのすべてのSVGコードを使用するため、マスクを動的に作成します。このSVGセットアップは、ページ全体を引き継いでグラデーションの背景を与え、テキストのみでこの背景をマスクすることで機能します。

グラデーションはCSSを介してアニメーション化できるため、アニメーション化するのはテキストだけであるかのように見えます。かなりクールな効果で、実験的なWebサイトやランディングページに追加することを検討してください。

8.アニメーションクリッピングマスク

この抽象的なクリッピングマスクアニメーションは、ランダムに生成されたJSを利用したバブルを使用して、画像をマスクします。キャンバス要素とアニメーション化されたクリッピングマスクを組み合わせて、まとまりのあるSVGブロブを形成します。

それほど多くはないように思われるかもしれませんが、開発者のNeil McCallionがかなり甘いコードを書いたので、最終的な結果は間違いなく奇妙です。

マスキングは主にcanvas要素で行われますが、JavaScriptを介して制御されます。これは、2つの画像を抽象的なSVGアニメーションとブレンドする楽しい方法です。

繰り返しになりますが、これは実際のWebサイトでは多くの目的に役立たないかもしれませんが、マスクをいじくり回すためのクールな実験です。

9. SVGBGマスク

反対に、ほとんどすべてのWebサイトで実行できるマスキング効果があります。

これは、ヒーローヘッダーと一緒に背景グラデーションを使用して、完全にブレンドされた複雑なマスキング効果を作成します。

開発者のRynaRudenkoは、ほとんどのマスキング効果がHTMLに階層化された生のキャンバス要素を使用して、このペンでエンベロープをプッシュしました。

このマスクは実用的で大きなヘッダーで使用できるだけでなく、非常に巧妙に作成されており、HTML5とCSS3でのみ実行されます。現代のWeb標準がうまく利用されている代表的な例。

10.CSSおよびSVGマスク

このSVGマスクの完全なギャラリーは、純粋なCSSでできることを実際に実感させます。

これは、すべて同じ写真、異なる形式を使用するさまざまなマスキング手法を紹介するデモです。さらに、各例には、自分でテストできるサンプルコードがページに含まれていますが、CodePenのエディターからコードをコピーするのも同じくらい簡単です。

しかし、この小さなペンは、実行できるさまざまな画像マスキング効果のガイド付きイントロのように機能します。簡単なデモでSVGとマスクに飛び込みたい場合は、始めるのに最適な場所です。