1. まとめトップ
  2. IT・ガジェット

サイトの進化を感じる「CSS3ア二メーション」の世界

常に進化し続けるWebデザインの世界。css3アニメーションがかなりアートと評判です。

更新日: 2013年07月15日

462 お気に入り 41648 view
お気に入り追加

この記事は私がまとめました

IT次郎さん

常に進化を続けるWebデザインの世界、CSS3の魅力を最大限に引き出す事により、今より一歩先のサイト構築が可能になります。その素晴らしいCSS3アニメーションの世界をご堪能ください。

CSS3とは?

「CSS」は、ウェブページの見栄え(デザイン)を定義するための言語として、広く使われています。「Cascading Style Sheets」の略ですが、単に「スタイルシート」とも呼ばれます。

CSS3のここが凄い!

CSS3では、カンマで区切って複数の値を指定できるようになったため、1つの要素に複数の背景画像を表示できます。

読者ユーザーの見ている画面サイズを自動的に調べ、ウィンドウ幅に応じて最適なスタイルシートを適用するメディアクエリというテクニックが利用されている

例えば今見ているNAVERまとめのサイトのウィンドウ枠を狭めてみてください
(右上のーと×の間の□ボタンを押し、画面の端をドラッグ)
狭めるにつれて、画面下に出てくるスクロールバーを使用しないと文字が読めなくなります。
しかし、メディアクエリを採用しているサイトは
http://stephencaver.com/

さっきと同じことをすると…

右のようにメニューバーが縦に並び、幅に応じて最適化されます。

極めつけはアニメーション(百聞は一見にしかず)

出典w3q.jp

http://tympanus.net/Development/IconHoverEffects/
(Icon Hover Effects)
マウスを乗せるだけで心地いい…
9通りのパターンあります

出典w3q.jp

http://tympanus.net/Development/AnimatedBooks/
(Animated Books)
電子書籍販売サイトに採用?!
ハードカバーとペーパーバックバージョンが楽しめます。

http://css3.zxq.net/doraemon/doraemon_css3.html
目が動く…
ブラウザの種類によって違うみたいです。

CSS4もあるらしい

未だに勧告候補に至っていないLevel 3モジュールが存在する中、既にLevel 4モジュールの公開草案がいくつか公開されている。

関連書籍、リンク

デザイン性にすぐれ、スマホやWeb制作にそのまま使えるデザインパーツを厳選して掲載。
CSS3で制作したWebパーツ素材集!
(Amazon商品の説明)

1