TREND 菊池 崇の実践！CSS3道場 ― 第1回

もう画像は要らない！CSS3で作る申し込みボタン (4/4)

今回登場したCSSプロパティのまとめ

text-shadow

　テキストに対して1つ、または複数の影を適用する。値は左から＜右方向への影＞＜下方向への影＞＜ぼやけ具合＞＜影の色＞になる。

1つの場合

sample-text {
text-shadow : 0px -1px 0px #ccc; } /* FF3.5+, Opera 9+, Saf1+, Chrome */

複数の場合

sample-text {
text-shadow : 0px -1px 0px #ccc, 0px 1px 0px rgba(0,0,0,.8); } /* FF3.5+, Opera 9+, Saf1+, Chrome */

IE	Firefox	Safari	Opera	Chrome
―	3.5+	1.3+	9.5+	2+

box-shadow

　ボックスに対して1つもしくは複数の影を適用する。値は左から＜右方向への影＞＜下方向への影＞＜ぼやけ具合＞＜影の色＞になる。

sample-box {
-moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5+, IE 9.0+ */ }

IE	Firefox	Safari	Opera	Chrome
9+	3+	1.3+	9.2+	2+

transition

　指定要素と指定プロパティにアニメーションを設定する。＜指定するプロパティ＞＜アニメーション開始から終了の時間＞＜アニメーションの種類＞の順に指定する。＜指定するプロパティ＞は全部に適用する場合は「all」と記述、box-shadowに適用する場合には「box-shadow」と記述をする。

.box_transition {
-moz-transition: all 0.3s ease-out;  /* FF3.7+ */
-o-transition: all 0.3s ease-out;  /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */　}

IE	Firefox	Safari	Opera	Chrome
―	3.7+	3.2+	10.5+	1+

content

　contentプロパティはCSS2.1のプロパティだ。:before／:after疑似要素と一緒に利用する。以下の例のように、印刷用のスタイルシートで、リンクの後ろにURLを表示させる場合などに用いられることが多い。

@media print {
    a[href]:after {
        content: "<" attr(href) ">";
    }
}

IE	Firefox	Safari	Opera	Chrome
8+	3+	1.3+	9.2+	2+

border-radius

　角丸を適用するプロパティ。値には角の半径を指定する。2つの値を指定した場合は、＜水平方向の半径＞＜垂直方向の半径＞になる。

.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4 */
border-radius: 12px; /* Opera 10.5, IE 9, Saf5, Chrome */　}

IE	Firefox	Safari	Opera	Chrome
9+	1+	3+　※	10.5+	1+

※Safari 5はベンダープリフィックスなし

■参考リンク

• Writing cross-browser, future-proof CSS 3
• CSS Backgrounds and Borders Module Level 3

（タイトルイラスト：高田馬場団地）