0 / 0

CSS3 FOR
TOMORROW —テキスト装飾と実例—

M福田泰雄

自己紹介とか

福田 泰雄
  • HTMLコーダ兼プログラマ
  • サーバのインストールから、CGI作成まで
  • 携帯サイトのバックエンドを担当

Sig. / twitter@sigwyg

archiva.jp

Sugamo.css / twitter@Sugamo_css

コーダを集めて
フロントエンドについて話そう！ という集まり

よろしくお願いします

目次

テキスト装飾と具体的な実例などを紹介します
  1. text-shadow
  2. 実例とか紹介
  3. まとめ

text-shadow

text-shadow

要素内のテキストに対して、影を付けることができます

書き方

#tShadow_0 {
    color: #fff;
    text-shadow: #f90 9px 9px 2px;
                  色  X軸 Y軸 ぼかし
}

Fuzzy(ぼかし)

Coder's Higher
text-shadow: 10px 10px #E58;
Coder's Higher
text-shadow: 10px 10px 3px #E58;
Coder's Higher
text-shadow: 10px 10px 10px #E58;

見やすくする

#tShadow_3 {
    color: #222;
    text-shadow: #000 1px 2px 3px;
}

たくさん影を付けてみる

#tShadow_5 {
    text-shadow: red      0px -16px 5px,
                 blue    16px   0px 5px,
                 green    0px  16px 5px,
                 yellow -17px   0px 5px
                 ;
}

ネオンっぽく！

#tShadow_6 {
    color: #FFF;
    text-shadow: 0 0 0.2em #F66,
                 0 0 0.2em #F66;
}

隆起させてみる

#tShadow_7 {
    color: #333;
    text-shadow: -1px -1px #fff,
                  1px  2px #555;
}

凹ませてみる

#tShadow_8 {
    color: #555;
    text-shadow: 1px  1px #fff,
                -2px -2px #000;
}

主な用法

コントラストを上げる
可読性の向上
立体感を出す
見出しを目立たせる

実例とか紹介

未来的と称されるCSS3
実際どのように使われているのか？

TheFind blog text-shadow: 0 1px 1px #000;
Chris Pacheco text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
charity: water text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
David DeSandro

装飾的なテキスト

David DeSandro made this.

He is a graphic & web designer living in Arlington, VA, working at nclud in Washington, DC. Being creative and making stuff keeps him happy.

David DeSandro made this. 
#sample1 a span {
    text-shadow: 1px 1px #000, 2px 2px #000, ... 8px 8px #000;
    -webkit-transition: all 0.12s ease-out;
       -moz-transition: all 0.12s ease-out;
         -o-transition: all 0.12s ease-out;
}
David DeSandro made this. 
#sample1 a {
    -webkit-transition: all 0.12s ease-out;
       -moz-transition: all 0.12s ease-out;
         -o-transition: all 0.12s ease-out;
}
#sample1 a:hover {
    color: #FFF;
    top: -3px;
    left: -3px;
    text-shadow: 1px 1px #58E, 2px 2px #58E, ... 11px 11px #58E;
}

He is a graphic & web designer living in Arlington, VA, working at nclud in Washington, DC. Being creative and making stuff keeps him happy. 

#sample2 .where-what { 
    color: #555;
    text-shadow: 0 0px 1px #222;
    -webkit-transition: all 0.2s ease-out;
       -moz-transition: all 0.2s ease-out;
         -o-transition: all 0.2s ease-out;
}

He is a graphic & web designer living in Arlington, VA, working at nclud in Washington, DC. Being creative and making stuff keeps him happy. 

#sample2 .where-what:hover {
    color: #666;
    text-shadow: 0 4px 1px #000;
    -webkit-transform: scale(1.25);
       -moz-transform: scale(1.25);
         -o-transform: scale(1.25);
}
BEERCAMP

h2:after {
    -moz-trasnform: skewX(60deg) scaleY(1.5)
                    translate(-0.62em, -0.12em);
    content: "Sponsorship";
}
SXSW Design Workshop

Faruk Ateş

Mac WebKit Win IE8


まとめ

CSS3が利用できる（されている）ケース

ex.
  • プロトタイプ
  • 社内案件の管理画面
  • text-shadow/box-shadowだけ

Progressive Enhancement

ex.
  • MOSe
≠
  • IE6で見ると右上に『アナログ』
Internet Explorer 9

CSS3 FOR TOMORROW

終わり

参考

CSS Text Level 3
http://www.w3.org/TR/css3-text/#text-shadow
Simple text-shadow
http://www.chrispacheco.com/
http://blog.thefind.com/
http://virb.com/charitywater
Decorative text-shadow
http://desandro.com/
http://sxsw.beercamp.com/
http://sxswdesignworkshop.com/
UI sample
http://farukat.es/
Internet Explorer 9
http://ie.microsoft.com/testdrive/