1. css3講座
表現力が高まったcss

2. スケジュール
01. htmlについて
02. css3について
03. バージョンの関連性
04. ブラウザ毎の対応
05. cssの使い方
06. 角丸
07. 影
08. 文字の影
09. グラデーション
10. 透過
11. トランジション
12. IE対応

3. Webサイトについて
html：文書構造の意味付け
css：装飾、見た目
javascript：行動、振る舞い、動き
html css javascript

4. css3について
Webフォント、角丸、ドロップシャドウなど、
今までグラフィックツールに頼っていた表現が、
css3で可能になった
css2 新機能 css3＋ ＝
角丸 ドロップシャドウ

5. バージョンの関連性
関連性はなく、どのバージョンでも使える
html4.0 css3＋
xhtml1.0 css3＋
html5 css3＋

6. ブラウザの対応
ブラウザ対応表
http://fmbip.com/litmus/
全てのブラウザが対応しているわけではない
プログレッシブ・エンハンスメント
未対応環境では情報の関連性を確保 大きく崩れなければいいよ
※覚えなくてもいいよ

7. ブラウザの対応
Chrome IE8

8. cssの使い方
-webkit-
ベンダープレフィックス
草案段階。先行実装する場合に、拡張機能であることを、明示的
につける識別子。
-moz-
Chrome,safari用
Firefox用
草案でなくなれば、プレフィックスはいらなくなる
border-radius: 50px
-webkit-border-radius: 50px
-moz-border-radius: 50px
//プレフィックス無し
//Chrome用、Safari用
//Firefox用

9. 角 丸
border-radius: 20px; // プレフィックス無し
-webkit-border-radius: 20px; // Chrome用、Safari用
-moz-border-radius: 20px; // Firefox用

10. 影
box-shadow: 10px 10px 20px #000;
横方向のズレ
↓
↑
縦方向のズレ
ぼかし幅
↓
↑
影の色
box-shadow: 10px 10px 20px rgba(0,0,75,0.5);

11. 文字の影
text-shadow: 4px 4px 7px #777;
Text Shadows

12. background-image: -webkit-linear-gradient(top, #FFF, #F60);
グラデーション
開始位置と角度
↓
↑
開始色
終了色
↓
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor

13. background-color: #ff9900;
opacity: 0.5;
/* もしくは */
background-color: rgba(255,153,0,0.5);
透 過

14. #box{
background-color: #ff9900;
-webkit-transition: all 1s ease-out;
}
#box:hover{
background-color: #0099ff;
-webkit-box-shadow: 0 0 30px #000;
}
トランジション

15. transition: all 1s ease-out;
トランジション
変化させるプロパティ
（全ての場合は All）
↓
↑
秒数
イージング
↓
linear（一定のスピード）
ease-in (初速をゆっくり )
ease-out (終速をゆっくり)
ease-in-out (初速と終速をゆっくり)

16. IE対応
Net Applications
http://www.netmarketshare.com

17. IE対応
PIE: CSS3 decorations for IE
http://css3pie.com/
日本語解説: http://mae.chab.in/archives/1463