CSSを含むSVGフィルタを追加する

Sep 13, 2025

操作方法

SVGは2000年代初頭以来、まだ興味深い方法があり、デザイナーがそれを使用することを見つけています。このチュートリアルでは、FOCUSはSVGを介して適用されるフィルタにありますが、SVGイメージに適用するのではなく、それらが通常のページコンテンツに適用できる方法を説明します。

フィルタがSVGに適用される方法は実際にはCSSを介して、フィルタがどのIDであるかを伝えることによって。同じアイデアを使用して、たとえば、フィルタを通常のテキストに適用できます。これについての良い部分はあなたがあなたのテキストにいくつかの素晴らしいグラフィカルを追加することができるということです。 SVGフィルタを使用すると、テキストはアクセス可能で選択可能なままで、ページ上の通常のテキスト要素のままです。

ここでのコードは、水のように見えてページのテーマに合うように見えるようにするためのアルファマップも含まれているテキストへの変位マップを作成します。その後、メニューを水のブロブとして表示させる別のフィルタが作成されます。この特定のページのテーマにもこの特定のページをテーマに保ち、他のコンテンツにSVGフィルタを適用するための2つのクリエイティブな方法が表示されます。

SVGについてもっと学ぶのに興味がありますか？私たちの記事を見てください あなたがウェブ上のSVGについて知る必要があるすべて 。あるいは、これらのクールな1つとあなたのサイトに興味をいくつか追加してください CSSアニメーションの例 。

ファイルをダウンロードしてください Filesiloのこのチュートリアルのために

01.はじめに

まず、上記のリンクを使用してプロジェクトファイルをダウンロードする必要があります。それをしたら、をドラッグします開始コードIDEにプロジェクトフォルダを開いて開きます index.html ページ。あなたはすでに書かれているページコンテンツがあるのがわかります。ヘッダーセクションを作成する必要があります。これにより、SVGフィルタの影響を受けるヘッドラインが含まれます。ここにコードを追加してください体鬼ごっこ。

 divクラス= "bg"＆gt。

02.ヘッダーを閉じます

これで、ヘッダーは完成しています。現時点でブラウザであなたのページを見ると、あなたはそれにいくつかのテキストを持つ水画像が表示されます。まだ現在UNSTYLEDされているヘッドラインはスタイルアップされ、SVGフィルタが適用される予定です。

03. SVGフィルタを作成します

SVGコードはページ上のどこにでも追加できますが、それが見られないので、閉じるボディタグの前に、下部に配置することをお勧めします。 SVGフィルタは乱流ノイズを作成します。 FilterにIDがあることに注意してください - これはCSSがこれをページ上の別の要素に適用できるものです。

04. SVGを非表示にします

に移動する page.css. 今、ファイルの残りのページのCSSコードをすべて上回ると、私たちの新しいCSSが行くところになります。ここでSVGはページに表示されないように設定されています。 2つのタグを見出し、右の書体が適用されるように設定されています。

 SVG {
表示：なし
}
H2 {
フォントサイズ：5.5VW;
フォントファミリー：「クレイトラウンド」、セリフ;

05.見出しに追加します

the 行の高さ 後でヘッドラインがアニメートされるため、ゼロに設定されているため、ページ上のスケーリングを制御することが重要です。それはそれがその周囲の正しい量のスペースで座って色が変わるように、いくつかのパディングを与えられます。

。ヘアライン{
線の高さ：0;
表示：インラインブロック;
パディング：70ピクセル。
カラー：#CCFFFF

06.見出しを終了します

Add SVG filters with CSS: Finish the headline — SVGはヘッドラインテキストを置き換えるために使用されます

見出しクラスを終了すると、次の行は適用されます 排気率フィルター テキストへのSVG内のID。 the 翻訳3D テキストがハードウェアになるようにします。変位が適用されたときにそれが正しく見えるようにするために、スケールはわずかに変わります。

フィルタ：URL（#displactingfilter）;
変換：translate3d（0,0,0）;
変換：Scaley（1.8）Rotatey（-2deg）;

07.それを変位させます

Add SVG filters with CSS: Make it displace — そして今テキストは避難されています

この段階でフィルタをテストした場合、乱流はテキストを完全に置き換えます。修正が簡単です。 index.htmlページのフィルタコードに戻ります。これにより、テキストである乱流とソースグラフィックを取り、それを変位フィルタとして適用します。基本周波数と乱流のオクターブ数を変更してみてください。

 FedisplachmapN IN2 = "乱流" IN = "
SourceGraphic "Scale =" 30 "XchannelSelector =" R "
ychannelselector = "G"結果= "disp" / gt;

08.エッジを柔らかくします

Add SVG filters with CSS: Soften the edges — テキストを柔らかくするためにガウスのぼかしを使う

エッジは水のような効果のために少し過酷に見えます。それはガウスぼかしで治えられます。変位マップの後にコードを追加します。ページを更新すると、テキストを間違いなくぼかしましたが、変位は消えています。これをやることは、効果の作成方法に固定できる要素です。

＆lt; fegaussianblur in = "SourceGraphic"
stddeviation = "15" result = "blr" / gt;

09. 2つのコンポジット

Add SVG filters with CSS: Compositing the two — より楽しい効果のためにぼかしと変位を組み合わせる

ここで以前のガウスぼかしの下にあるコンポジットラインを追加します。これはぼかしと排気量と一緒に組み合わされ、またテキストに水色の半透明の効果を生み出します。それはエッジを柔らかくするために何らかの方法を与えましたが、十分ではありません。元のぼかしがこれに追加された場合、それは良いでしょう。

 fecomposite in = "blr" in2 = "" "" "" operator = "" "" "Comp" / gt;

10.ぼかしをマージします

Add SVG filters with CSS: Merging the blur — マージ操作でそれはさらに良く見えます

マージ操作により、複合材の最終結果をぼかし効果とマージすることができます。これはバックグラウンドイメージに合っており、水を通ってくる光の線に合うようです。テキストに関する最良の部分は、Photoshopでこれを作成した場合は、まだ選択可能でページの一部であることです。

＆lt; Femerge Result = "Final"＆Gt。
＆lt; Femergenode In = "BLR" / gt;
＆lt; Femergenode In = "Comp" / Gt。
＆lt; / Femerge＆GT

11.アニメーションを作成します

に戻る page.css. ここに示すように、ファイルとキーフレームに追加します。これにより、フォントサイズをゼロ垂直幅から5.5垂直幅に拡大縮小します。開始時にこれはヘッドラインに適用され、テキストが画面上で拡張されているようになります。テキストが動くにつれて、変位も長さにわたって変化し、水平なリップルを与えます。

 @keyframesスケーラ{
{
フォントサイズ：0VW;
}
{
フォントサイズ：5.5VW;
}

12. H2スタイルを変更してください

Add SVG filters with CSS: Change the h2 style — いくつかのアニメーションに持ち込むためにH2を交換してください

the h2 ステップ4で以前にスタイルが追加されました。そのコードをこの新しいコードで置き換えます。これは、4秒以上のCSSアニメーションを見出しに追加します。アニメーションは最後のキーフレームを停止して保持します。これを保存してブラウザでテストして、テキストが所定の位置に表示されます。

 H2 {
線の高さ：0;
フォントサイズ：0VW;
アニメーション名：スケーラ;
アニメーション期間：4秒;
アニメーションフィルモード：転送;
フォントファミリー：「クレイトラウンド」、セリフ;

13.ナビゲーションを追加します

それでは、別のSVGフィルタを使用して適切な水のブロブに触発されたアニメーションを作成しましょう。チュートリアルの最初のステップで開始された見出しの前に、次のナビゲーションコンテンツを本文コードの最上位に追加します。これにより、ハンバーグメニューのサークルの基本が作成されます。

14.ナビゲーションを終了します

今残りのナビゲーション要素を追加することができます。これはまた、このライブラリのCDNからリンクするためにヘッドセクションに追加されたFont Awesome Open Source Icon Libraryを使用します。各メニューの円形要素にはその内側のアイコンがあります。

＆lt; href = "＃" class = "メニュー項目"＆gt; ＆lt; class = "fa.
FA車「＆gt; / i＆gt;＆lt; / A＆GT;
＆lt; href = "＃" class = "メニュー項目"＆gt; ＆lt; i
CLASS = "FA FA-SHIP"＆gt;＆lt; / i＆gt; ＆lt; / a＆gt;
＆lt; href = "＃" class = "メニュー項目"＆gt; ＆lt; i
CLASS = "FA FAマップ"＆gt;＆lt; / i＆gt; ＆lt; / a＆gt;
＆lt; href = "＃" class = "メニュー項目"＆gt; ＆lt; i
CLASS = "FA FA-SUITCASE"＆gt;＆lt; / i＆gt; ＆lt; / a＆gt;
＆lt; / NAV＆GT;

15.新しいフィルタを追加します

この効果のために別のフィルタを追加する予定です。 SVGでは、以前に追加されたコードの終了フィルタタグの後にこのコードを追加します。ここでは、効果は以前に非常に似たように構築されています。これにより、メニューが離れて移動する液体の粘着性の塊のように見えることができます。

フィルタID = "Shadowed-Blob"＆GT;
＆lt; fegaussianblur = "SourceGraphic"
結果= "blur" stddeviation = "20" / gt;
＆lt; fecolormatrix in = "blur"モード=
「行列」値= "1 0 0 0 0 0 1 0 0
0 0 0 0 0 0 0 0 0 0 1 18 -7 "
結果= "blob" / gt;
＆lt; fegaussianblur in = "blob"
stddeviation = "3" result = "shadow" / gt;
＆lt; fecolormatrix in = "shadow"モード=
「行列」値= "0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 1 -0.2 "
結果= "shadow" / gt;

16.フィルタを終了します

ここではフィルタの残りの部分が追加され、メニュー項目の各円に配置される効果が完了します。これにより、要素に液体ブロブ効果が追加されます。このページを保存してから、 'design.css'ファイルに切り替えます。

 feoffset in = "shadow" dx = "0" dy = "2"
結果= "Shadow" / gt;

17.フィルタを適用します

CSSコードを別のものに追加することができます design.css. 、すべてのナビゲーションCSSを同じ場所にまとめるためだけに。いくつかのコードが追加されましたが、ここではフィルタがメニューに適用されます。メニューに適用されます。これは、常に画面上に存在するように固定メニューになります。

 .menu {
フィルタ：URL（ "＃shadowed-blob"）;
位置：固定
パディングトップ：20px;
パディング - 左：80px。
幅：650px;
高さ：150px;
ボックスサイジング：ボーダーボックス。
フォントサイズ：20px;
テキスト整列：左;

18.メニュー作業を行います

メニューが開いているときに、メニューは見えないように設定されています。各メニュー項目のホバー要素は、ユーザがこれを覆っているときに変更があるように作成される。メニュー項目が元の位置に戻っているときに、メニューの各子には0.4秒の遷移が与えられます。

 .menu-open {
表示：なし
}
.menu-item：hover {
背景：＃47959F;
カラー：＃B2F0F8;
}
.menu-item：nth-child（3）、.menu-item：NTH-
子供（4）、;menu-item：nth-child（5）、.menu-
アイテム：NTH-子供（6）{
トランジション期間：400ms;

19.ハンバーガーを追加してください

Add SVG filters with CSS: Burger icon to the top — ハンバーガーのアイコンのZ-Indexを変更して先頭へ

ハンバーガーのアイコンは、その他の要素の上に上昇しています Z指標 。メニューはこれをオーバーしてこのメニューをクリックし、メニューをクリックすると、メニューを削除するオプションが表示されます。

 .menu-open-button {
zインデックス：2;
遷移タイミング機能：立方体 - 
ベジエ（0.175,0.885,0.32,1.275）。
トランジション期間：400ms;
変換：スケール（1.1,1.1）Translate3D
（0,0,0）;
カーソル：ポインタ;
}
.menu-open-button：ホバー{
変換：スケール（1.2,1.2）Translate3D
（0,0,0）;
}

20.要素を移動します

最初のメニュー項目は、チェックボックスとその前にハンバーガーがあるので、実際にはメニューの3番目の子です。これを追加すると、メニューがユーザーによってクリックされると、最初のメニュー要素が位置に移動することができます。各メニュー要素はわずかに長い時間で移動します。

.menu-open：チェック済み+ .menu-open-button {
遷移タイミング機能：線形;
トランジション期間：400ms;
変換：スケール（0.8,0.8）Translate3D
（0,0,0）;
}
.menu-open：checked ~menu-item {
遷移タイミング機能：立方体 - 
ベジエ（0.165,0.84,0.44,1）。
}
.menu-open：チェック〜.menu-item：nth-child（3）{
トランジション期間：390ms
変換：translate3d（110px、0,0）;

21.残りの動きに対処します

Add SVG filters with CSS: Remaining movement — より液体の外観のためにさまざまなスピードでメニュー要素を移動します

残りのメニュー要素は異なる速度で移動されます。これにより、要素はアニメーションの初期段階で互いに固着することができ、SVGフィルタを使用してぼかしの液体の外観を与えます。文書を保存して、ブラウザの完成した結果を確認してください。

 .menu-open：チェック〜.menu-item：nth-child（4）{
トランジション期間：490ms;
変換：translate3d（220px、0,0）;
}
.menu-open：チェック〜.menu-item：nth-child（5）{
遷移期間：590ms;
変換：translate3d（330px、0,0）;
}
.menu-open：checked〜.menu-item：nth-child（6）{
トランジション期間690ms;
変換：translate3d（440px、0,0）;

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 ここで問題283を購入してください または ここでWeb Designerを購読してください 。

関連記事：

JavaScriptでSVGをアニメートしてください
SVGの完全なガイド
GSAPでスーパーチャージするSVGアニメーション

CSSを含むSVGフィルタを追加する

01.はじめに

02.ヘッダーを閉じます

03. SVGフィルタを作成します

04. SVGを非表示にします

05.見出しに追加します

06.見出しを終了します

07.それを変位させます

08.エッジを柔らかくします

09. 2つのコンポジット

10.ぼかしをマージします

11.アニメーションを作成します

12. H2スタイルを変更してください

13.ナビゲーションを追加します

14.ナビゲーションを終了します

15.新しいフィルタを追加します

16.フィルタを終了します

17.フィルタを適用します

18.メニュー作業を行います

19.ハンバーガーを追加してください

20.要素を移動します

21.残りの動きに対処します

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

EMベースサイジングを用いた応答部位を設計する

3DS MAXとV-RAYで現実的な3D髪と毛皮を作る

クリーチャー解剖学

パステルを使って風景を描く方法

表現上の手を塗るための上のヒント

GIFSからのもっと得る方法

鮮やかな妖精の女王を作成する方法

伝統的およびデジタルスキルを組み合わせてコミックカバーを作成する

カテゴリ