about css3 vol.2

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・・・・・・・・。

sevenstyleweb.com/blog/

@sevenina

kouina@generalasahi.co.jpsevenina77@gmail.com