SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ
Post on:2014年6月24日
sponsors
最近は海外だけでなく、日本でも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でさまざまなエフェクトを加えます。メインコンテンツよりナビゲーションが楽しくなりすぎないようにご注意をｗ
Inspiration for Inline Anchor Styles
デモページ
インラインのテキストリンクにSVGや疑似要素を使って、さまざまなホバーエフェクトを加えます。デザインが変わるものやリンク先の情報が表示されるものなど、かっこいいものから実用的なものまで。
A Collection of Separator Styles
デモページ
article, div要素などでコンテンツを区切る際に、SVGや疑似要素を使いさまざまな区切り線を描きます。
ドットを並べたナビゲーションに、14種類の繊細でかっこいいエフェクトを加えます。見た目はほとんど同じなのにアイデアが盛りだくさんです！
最後はSVGアイコンの実装方法。基本から、幅や高さの変更、カラーの変更、ストロークの変更、フィルターエフェクトの適用、さらに↑のように実際に動く時計まで。
sponsors
