美しいSVGアニメーションを使ったWebサイト10選【デザインの参考に】 | Handy Web Design
SVGというのはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、拡大縮小しても画質を損なわないベクターデータです。Adobeのイラストレーター使っている人はよくわかると思います。 そんなSVGをブラウザ上でCSS3やJavascriptを使って動かすSVGアニメーションを良く見かけるようになったので、今回はおすすめのものを10個ご紹介したいと思います。どれもきれいなものばかりなので、見てみると自分でもSVGアニメーションを作ってみたくなりそうです。 それではどうぞ。 The 25th Hour Louis Coyleさんの作品。自然の中で夜が明けていく様子がとても綺麗です、蛍のふわふわとしたアニメーションも幻想的。 http://louie.co.nz/25th_hour/ Super Duper Studio ブラジルのデザインスタジオの
実は簡単！3分で分かるSVGアイコンの作り方 | WebNAUT
※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。 スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは？ “Scalable Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。 スマホ対応・Retina対応も1つのファイルでOK 同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。 後からサイズや色の調整が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
