「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はRGBA・HLS色空間・HSLAによって色の特性・値・透明度だけでなく、線形グラデーション・円形グラデーションを指定することも可能です。右上のカラーボックスをクリックすれば、器の中の液体のグラデーションを変更することができます。
...詳しい情報・続きはこちら >>
http://gigazine.net/news/20150223-adobe-theexpressiveweb/
─情報元:GIGAZINEサイト様─
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はRGBA・HLS色空間・HSLAによって色の特性・値・透明度だけでなく、線形グラデーション・円形グラデーションを指定することも可能です。右上のカラーボックスをクリックすれば、器の中の液体のグラデーションを変更することができます。
...詳しい情報・続きはこちら >>
http://gigazine.net/news/20150223-adobe-theexpressiveweb/
─情報元:GIGAZINEサイト様─