2015年2月25日水曜日

HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」

HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか?」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。

HTML5 and CSS3 - Adobe - The Expressive Web - Beta
http://beta.theexpressiveweb.com/



「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフレームベースのアニメーションを追加するもの。


右上に「何ができるのか」が書かれており、CSS3 Animationsではキャラクターのジャンプの高さをスライドして変更することができます。


数値を変更すると、キャラクターがハードルを飛び越える高さが変わりました。


そのままページをスクロールすると、各コンテンツの詳細も記載されています。CSS3アニメーションの各ブラウザサポート率は53.91%とのこと。


各コンテンツの参考文献・サンプルページ・説明ページなどもリンクされています。


関連するAdobeのソフトウェアはどれなのか、ということまでわかります。


続いて「CSS3 Gradients」。CSS3はRGBAHLS色空間HSLAによって色の特性・値・透明度だけでなく、線形グラデーション円形グラデーションを指定することも可能です。右上のカラーボックスをクリックすれば、器の中の液体のグラデーションを変更することができます。




...詳しい情報・続きはこちら >>
http://gigazine.net/news/20150223-adobe-theexpressiveweb/
─情報元:GIGAZINEサイト様─