ひらい ぶらり Hi-Library

ぷろぐらみんぐについて。ときどきどうでもいいことについて。

iPhoneだと使えるCSS3

2010年だかに勧告される予定のCSS3。
現在の所、FireFox,Opera,Safariが対応しているものの、ゲイツブラウザでは対応していないためいまいち使いどころにかけるCSS3。

しかしiPhoneじゃどうせsafariしか使えないので、がんがん使えます。
そんなiPhoneスキーのために使えるCSS3をまとめてみた。

丸角CSS
-webkit-border-radius:10px;
-webkit-border-top-left-radius 左上
-webkit-border-top-right-radius 右上
-webkit-border-bottom-left-radius 左下
-webkit-border-bottom-right-radius 右下

今までdivやらtableやらをゴリゴリと書きまくって実現していた丸角もこれでおっけー。わー楽チン。Web2.0っぽいサイトもこれで量産できますね。

さらに素敵なお知らせ。
これでは角が丸まるだけで、他にも苦労してCSSでドロップシャドウつけたり、画像の枠を作ったりしている人がいました。

-webkit-border-image

でもこれを使えばたいてい解決。
iPhoneの開発サイトとかでも、簡単にiPhoneのボタンが作れるようなCSSと画像を用意してありますが、それもコレを使ってた気がします。
詳しい使い方は
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20366360,00.htm
を参照。ザ・手抜き。

-webkit-text-shadow
-webkit-box-shadow
なんてプロパティもありますね。これで影もつけられます。

あとopacityプロパティも色々なエレメントに使えるようになっているらしいので、画像の上に文字を乗せるのもらくらくですね。