about CSS3 vol.2
Upcoming SlideShare
Loading in...5
×
 

about CSS3 vol.2

on

  • 904 views

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

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

Statistics

Views

Total Views
904
Views on SlideShare
904
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

about CSS3 vol.2 about CSS3 vol.2 Presentation 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…
  • CSS
    Cascading 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 images
    CSS3 adds the ability to apply
    multiple background images on an element
  • Sample
  • Question
  • A案
    B案
    <div id=“box”>
    <div id=“box_container”>
    <div id=“box_inner”>
    <p>ダミーダミー</p>
    </div>
    </div>
    </div>
    <div id=“box_header”></div>
    <div id=“box_content”>
    <p>ダミーダミー</p>
    </div>
    <div id=“box_footer”></div>
  • Web標準はA案です。
  • Agenda
    CSS 3
    Multiple background images
    Color
    Javascript
    One more thing…
  • Color
    RGB
    RGBA
    HSL
    HSLA
    opacity
  • HSL
    Hue, 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…
  • HTML4
    HTML5
    CSS2.1
    「極論」
    一般ユーザーにとってはどうでもいいこと。
    CSS3
    XHTML
    jQuery
    flash
  • HTML4
    HTML5
    CSS2.1
    これらの技術でどんな体験を
    ユーザーに与えることができるのか?
    CSS3
    XHTML
    jQuery
    flash
  • CSS3
    ・・・・・・・・。
  • sevenstyleweb.com/blog/
    @sevenina
    kouina@generalasahi.co.jp
    sevenina77@gmail.com