初心者向けチュートリアル：CSS3でSVGにドロップシャドウを追加する方法
SVGドロップシャドウ：CSS3による表現方法と実践ガイド
SVGは、Web上でベクター画像を扱うための標準フォーマットです。軽量で拡大縮小しても劣化しない特性から、アイコンやロゴ、イラストなど幅広い用途で活用されています。
本記事では、CSS3を用いてSVGにドロップシャドウを適用する方法について、初心者にも分かりやすく解説します。具体的なコード例や図を用いて、実践的なスキルを習得できるようサポートします。
目次
- ドロップシャドウとは？
- SVGにおけるドロップシャドウの重要性
- CSS3によるドロップシャドウの実装方法
3.1.
filterプロパティ 3.2.box-shadowプロパティ - 実践例：ボタンにドロップシャドウを適用する
- 高度な表現：複数のドロップシャドウを組み合わせる
- ブラウザ互換性と注意点
ドロップシャドウは、影を表現することで、オブジェクトに奥行きや立体感を与える視覚効果です。Webデザインにおいては、要素の境界線を強調したり、視覚的な階層を表現したりする効果的な手法として活用されています。
SVGはベクター画像のため、ドロップシャドウを画像自体に直接適用することはできません。しかし、CSS3を用いることで、SVG要素にリアルなドロップシャドウを簡単に追加することができます。
CSS3によるドロップシャドウの実装方法
CSS3では、主に2つのプロパティを用いてSVGにドロップシャドウを適用できます。
filterプロパティは、SVG要素にさまざまな視覚効果を適用するために使用されます。ドロップシャドウを表現するには、feDropShadowフィルタを使用します。
.svg-element {
filter: drop-shadow(
<オフセットx> <オフセットy> <ぼかし> <色>
);
}
各プロパティの詳細
<オフセットx>: 影の水平方向オフセット<ぼかし>: 影のぼかし量<色>: 影の色
例
.svg-element {
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
このコードは、SVG要素に右下方向に5pxオフセットされた、ぼかし量5px、半透明度50%の黒い影を適用します。
box-shadowプロパティは、ボックス要素に影を適用するために使用されます。SVG要素もボックス要素として扱えるため、box-shadowプロパティを用いてドロップシャドウを表現できます。
.svg-element {
box-shadow: <オフセットx> <オフセットy> <ぼかし> <拡散> <色>;
}
<拡散>: 影の拡散量
.svg-element {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
このコードは、filterプロパティの例と同様の影を適用します。
以下のコードは、CSS3を用いてSVGボタンにドロップシャドウを適用する例です。
<button class="button">
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="40" rx="5" />
</svg>
</button>
.button {
width: 100px;
height: 50px;
border: none;
background-color: #fff;
cursor: pointer;
svg {
width: 100%;
height: 100%;
}
サンプルコード：SVGボタンにドロップシャドウを適用
HTMLコード
<button class="button">
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="40" rx="5" />
</svg>
ボタンテキスト
</button>
CSSコード
.button {
width: 100px;
height: 50px;
border: none;
background-color: #fff;
cursor: pointer;
svg {
width: 100%;
height: 100%;
}
/* ドロップシャドウ */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
/* ボタンのスタイル */
border-radius: 5px;
color: #333;
font-size: 16px;
font-weight: bold;
/* ホバー時のスタイル */
&:hover {
background-color: #ddd;
}
}
コード解説
- HTMLコード: ボタン要素内にSVG要素を配置し、ボタンテキストを表示します。
- CSSコード:
.buttonセレクタ: ボタンのスタイルを定義します。svgセレクタ: ボタン内のSVG要素のスタイルを定義します。box-shadowプロパティ: ボタンにドロップシャドウを適用します。- その他のスタイル: ボタンの背景色、テキストの色、フォントサイズなどを設定します。
実行結果
上記のコードを実行すると、以下のようなドロップシャドウ付きのボタンが表示されます。
box-shadowプロパティは複数回指定することで、複数のドロップシャドウを重ねることができます。
.button {
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.2),
0 0 5px rgba(0, 0, 0, 0.1);
}
このコードは、2つの異なる影を重ねることで、より複雑なドロップシャドウを表現しています。
filterプロパティは古いブラウザでは対応していない場合があります。box-shadowプロパティは、一部のブラウザでぼかしや拡散の表現に違いが生じる場合があります。- ドロップシャドウの色やぼかし量などは、デザインに合わせて調整してください。
まとめ
CSS3を用いることで、SVG要素に簡単にドロップシャドウを適用できます。filterプロパティとbox-shadowプロパティを使いこなすことで、さまざまな表現が可能になります。
本記事を参考に、ぜひ実践的なデザインにドロップシャドウを取り入れてみてください。
SVGドロップシャドウ：その他の方法
feGaussianBlur フィルタはぼかし効果、feOffset フィルタはオフセット効果をそれぞれ表現できます。これらのフィルタを組み合わせることで、ドロップシャドウを表現できます。
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="40" rx="5" />
<filter id="drop-shadow">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feOffset dx="5" dy="5" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
</filter>
</svg>
rect {
filter: url(#drop-shadow);
}
clip-path とグラデーションの組み合わせ
clip-path を使って影の形を定義し、グラデーションを使って影の色を表現できます。
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="40" rx="5" />
<defs>
<clipPath id="drop-shadow">
<rect x="5" y="5" width="90" height="45" />
</clipPath>
</defs>
</svg>
rect {
clip-path: url(#drop-shadow);
}
#drop-shadow {
fill: url(#shadow-gradient);
}
#shadow-gradient {
xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGxpbmVhdyB4MT0iMCUiIHkxPSIwJSIgeDI
html css svg
