僕たちが待ち望んでいたCSS3 @Abiru

今更ながらCSS3を真面目に触りだしました。
IE8はCSS3に対応してませんが、FireFoxやChromeは対応しています。
IEは9から対応するらしいです。
IE8が対応していないといっても、デザインがめちゃくちゃになるわけではないので、使っておいてもデメリットはないに等しいと思います。

で、このブログの各記事タイトルに使ってみました。

角丸とグラデーション、ドロップシャドウの組み合わせ。

#content .entrytitle{
border: 1px solid #E0E0E0;
border-top: 3px solid #194D7F;
font-weight: bold;
background: -moz-linear-gradient(top, #EEE, #FFF 3%, #FFF 70%, #F6F6F6 90%, #FFF);
background: -webkit-gradient(linear, left top, left bottom, from(#EEE), color-stop(0.03, #FFF), color-stop(0.7, #FFF), color-stop(0.9, #F6F6F6), to(#FFF));
-moz-box-shadow: 0 1px 3px #DDD;
-webkit-box-shadow: 0 1px 3px #DDD;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
padding: 10px;
margin: 0 0 10px 0;
text-shadow: #EEE 0px 0px 1px;
}

画像無しでこんなことができちゃうなんてステキですね☆