SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
Post on:2014年6月24日
最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。
いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。
![デモのキャプチャ](/wp-content/uploads-201402/2014062401.gif)
Creating a Border Animation Effect with SVG and CSS
デモページ
パネルの四辺のボーダーにSVGを使って、さまざまなアニメーションのエフェクトを適用します。
![デモのキャプチャ](/wp-content/uploads-201402/2014062407.gif)
ページを表示する際に、SVGでエレメントや画像などの輪郭をアニメーションで描画してから表示します。
![デモのキャプチャ](/wp-content/uploads-201402/2014062402.gif)
Animated SVG Icons with Snap SVG
デモページ
ゴミ箱が開いたり、メールの封が開いたり、旗がゆらめいたり、矢印の向きが変わったりと、アニメーションで楽しませるSVGで作られたアイコン。
![デモのキャプチャ](/wp-content/uploads-201402/2014062403.gif)
Animated Checkboxed and Radio Buttons with SVG
デモページ
SVGを使ったかわいいアニメーションでチェックできるチェックボックスやラジオボタン。
![デモのキャプチャ](/wp-content/uploads-201402/2014062404.gif)
Shape Hover Effect with SVG
デモページ
画像の上にSVGでキャプション表示用のパネルを重ねます。パネルはパスを使って波線や斜めなど美しいデザインです。
![デモのキャプチャ](/wp-content/uploads-201402/2014062405.gif)
スライダーに使う左右のアローに、SVGでさまざまなエフェクトを加えます。メインコンテンツよりナビゲーションが楽しくなりすぎないようにご注意をw
![デモのキャプチャ](/wp-content/uploads-201402/2014062406.gif)
Inspiration for Inline Anchor Styles
デモページ
インラインのテキストリンクにSVGや疑似要素を使って、さまざまなホバーエフェクトを加えます。デザインが変わるものやリンク先の情報が表示されるものなど、かっこいいものから実用的なものまで。
![デモのキャプチャ](/wp-content/uploads-201402/2014062401-08.png)
A Collection of Separator Styles
デモページ
article, div要素などでコンテンツを区切る際に、SVGや疑似要素を使いさまざまな区切り線を描きます。
![デモのキャプチャ](/wp-content/uploads-201402/2014062401-09.png)
ドットを並べたナビゲーションに、14種類の繊細でかっこいいエフェクトを加えます。見た目はほとんど同じなのにアイデアが盛りだくさんです!
![デモのキャプチャ](/wp-content/uploads-201402/2014062401-10.png)
最後はSVGアイコンの実装方法。基本から、幅や高さの変更、カラーの変更、ストロークの変更、フィルターエフェクトの適用、さらに↑のように実際に動く時計まで。
sponsors