about css3 vol.2

32
CSS 3 のの 2 3 のの2 のの?~ Kousuke (seven)Inamoto

Upload: kousuke-inamoto

Post on 20-May-2015

794 views

Category:

Technology


0 download

DESCRIPTION

2011/2/18に行われたHTML5+α@福岡で発表した資料です。CSS3の機能の紹介から、ちょっと生意気なことまで発表しました。

TRANSCRIPT

Page 1: about CSS3 vol.2

CSS 3 の話 2~ 3 なの? 2 なの?~

Kousuke (seven)Inamoto

Page 2: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 3: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 4: about CSS3 vol.2

CSSCascading Style Sheets とは、

HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、 W3C による勧告の一つ。

文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

(From wikipedia)

Page 5: about CSS3 vol.2
Page 6: about CSS3 vol.2

CSS 3 CSS 2.1 + javascript ≒

Page 7: about CSS3 vol.2

• Selectors• Color• Namespaces• Media Query• Backgrounds & Borders• Template Layout• CSS Transitions• CSS Transform• CSS Animations• Fonts• Flexbox• Image Values

>Module

Cf:WebDesigning vol.100

Page 8: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 9: about CSS3 vol.2

Multiple background imagesCSS3 adds the ability to apply multiple background images on an element

Page 10: about CSS3 vol.2
Page 11: about CSS3 vol.2
Page 12: about CSS3 vol.2

Sample

Page 13: about CSS3 vol.2

Question

Page 14: about CSS3 vol.2

<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 案

Page 15: about CSS3 vol.2

Web 標準は A 案です。

Page 16: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 17: about CSS3 vol.2

Color

• RGB• RGBA• HSL• HSLA• opacity

Page 18: about CSS3 vol.2

HSLHue, Saturation, Lightness

色相、彩度、明度

Page 19: about CSS3 vol.2

出展: canon  

Page 20: about CSS3 vol.2

gradient

Page 21: about CSS3 vol.2

Sample

Page 22: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 23: about CSS3 vol.2

CSS 3 CSS 2.1 + javascript ≒

Page 24: about CSS3 vol.2

animation

Page 25: about CSS3 vol.2
Page 26: about CSS3 vol.2

Sample

Page 27: about CSS3 vol.2

Agenda

• CSS 3• Multiple background images• Color• Javascript• One more thing…

Page 28: about CSS3 vol.2

HTML5HTML4

XHTML

CSS2.1

CSS3

flash jQuery

「極論」一般ユーザーにとってはどうでもいいこと。

Page 29: about CSS3 vol.2

HTML5HTML4

XHTML

CSS2.1

CSS3

flash jQuery

これらの技術でどんな体験をユーザーに与えることができるのか?

Page 30: about CSS3 vol.2

CSS3・・・・・・・・。

Page 31: about CSS3 vol.2

sevenstyleweb.com/blog/

@sevenina

[email protected]@gmail.com

Page 32: about CSS3 vol.2