HTML5でこんなことできるよ!SVGを使った海外サイト

HTML5で書かれたWebサイト、多くなりましたよね。

無印良品ローソンのWebサイトもHTML5で書かれています。

「HTML5?HTMLやCSSの一番新しいバージョンでしょ?」という方もいるかもしれませんが、そうではないんです。

その中でもHTML5でサポートされているインラインSVGの作品集をご覧下さい!

1. Wrist

Wrist | A bi-weekly illustrative exercise by Matt Johnston in making new and old watches come to life.

本物の腕時計のようなデザイン。
これは画像ではなく、HTML5のSVGを使って描かれています。

2. Barcamp Omaha 2013

BarCamp Omaha 2018
Join us on August 4, 2018 for BarCamp, Omaha's favorite creative un-conference brought to you by AIGA Nebraska. This year, we invite you to share your messy, ex...

可愛いキャラクターと、星が繋がって描かれる文字。
とても素敵な演出ですね。

3. vlog.it

vlog.it
The Marco Rosella's rotating collection of favourites videos.

何かとても見入ってしまうアニメーション。
これもSVGを使って描かれているんです。

4. svgopen.org

まるでピタゴラスイッチですね。
こんな面白いことがブラウザ上で簡単に動かせるって知っていましたか?

 

いかがでしたかでしょうか。

HTML5のSVGを使うと色んな動きのあるサイトが作れるんです。

特にSVGはベクター形式という縮尺が変わっても画質が変わらない形式ですので、とても便利です。

世界で10万人がプログラミング教材の詳細を見る

コメント

タイトルとURLをコピーしました