about css3 vol.2
DESCRIPTION
2011/2/18に行われたHTML5+α@福岡で発表した資料です。CSS3の機能の紹介から、ちょっと生意気なことまで発表しました。TRANSCRIPT
CSS 3 の話 2~ 3 なの? 2 なの?~
Kousuke (seven)Inamoto
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
CSSCascading Style Sheets とは、
HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、 W3C による勧告の一つ。
文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
(From wikipedia)
CSS 3 CSS 2.1 + javascript ≒
• Selectors• Color• Namespaces• Media Query• Backgrounds & Borders• Template Layout• CSS Transitions• CSS Transform• CSS Animations• Fonts• Flexbox• Image Values
>Module
Cf:WebDesigning vol.100
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
Multiple background imagesCSS3 adds the ability to apply multiple background images on an element
Sample
Question
<div id=“box_header”></div><div id=“box_content”>
<p> ダミーダミー </p></div><div id=“box_footer”></div>
<div id=“box”><div id=“box_container”>
<div id=“box_inner”><p> ダミーダミー </p>
</div></div></div>
A 案 B 案
Web 標準は A 案です。
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
Color
• RGB• RGBA• HSL• HSLA• opacity
HSLHue, Saturation, Lightness
色相、彩度、明度
出展: canon
gradient
Sample
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
CSS 3 CSS 2.1 + javascript ≒
animation
Sample
Agenda
• CSS 3• Multiple background images• Color• Javascript• One more thing…
HTML5HTML4
XHTML
CSS2.1
CSS3
flash jQuery
「極論」一般ユーザーにとってはどうでもいいこと。
HTML5HTML4
XHTML
CSS2.1
CSS3
flash jQuery
これらの技術でどんな体験をユーザーに与えることができるのか?
CSS3・・・・・・・・。