SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
Animated SVG Icons with Snap.svg | Codrops
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
