SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
Post on:2014年6月24日
最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。
いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。

Creating a Border Animation Effect with SVG and CSS
デモページ
パネルの四辺のボーダーにSVGを使って、さまざまなアニメーションのエフェクトを適用します。

ページを表示する際に、SVGでエレメントや画像などの輪郭をアニメーションで描画してから表示します。

Animated SVG Icons with Snap SVG
デモページ
ゴミ箱が開いたり、メールの封が開いたり、旗がゆらめいたり、矢印の向きが変わったりと、アニメーションで楽しませるSVGで作られたアイコン。

Animated Checkboxed and Radio Buttons with SVG
デモページ
SVGを使ったかわいいアニメーションでチェックできるチェックボックスやラジオボタン。

Shape Hover Effect with SVG
デモページ
画像の上にSVGでキャプション表示用のパネルを重ねます。パネルはパスを使って波線や斜めなど美しいデザインです。

スライダーに使う左右のアローに、SVGでさまざまなエフェクトを加えます。メインコンテンツよりナビゲーションが楽しくなりすぎないようにご注意をw

Inspiration for Inline Anchor Styles
デモページ
インラインのテキストリンクにSVGや疑似要素を使って、さまざまなホバーエフェクトを加えます。デザインが変わるものやリンク先の情報が表示されるものなど、かっこいいものから実用的なものまで。

A Collection of Separator Styles
デモページ
article, div要素などでコンテンツを区切る際に、SVGや疑似要素を使いさまざまな区切り線を描きます。

ドットを並べたナビゲーションに、14種類の繊細でかっこいいエフェクトを加えます。見た目はほとんど同じなのにアイデアが盛りだくさんです!

最後はSVGアイコンの実装方法。基本から、幅や高さの変更、カラーの変更、ストロークの変更、フィルターエフェクトの適用、さらに↑のように実際に動く時計まで。
sponsors