スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
[備忘録]iPhone,safariで便利なCSS3
JUGEMテーマ:iphone


CSS3はボックス指定が便利で充実

-webkit-border-radius:20px 20px;//角丸
-webkit-box-shadow: 0px 5px 10px #000000;//シャドウ
-webkit-border-image:url(images/border.png) 0 10 0 10;//背景画像

特に-webkit-border-imageはものすごく便利。
1枚の背景画像を9分割して上下左右の画像の引き伸ばし具合を調節できる。
全てのブラウザで実装してほしい。

あとは、「-webkit-tap-highlight-color」でタップ時の色を指定できる、当然iPhoneのみ対応。

ただのDIVタグにここまでできる。



div {
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  text-align: center;
  text-shadow: #000 0px -2px 1px;
  line-height: 100px;
  
  width:250px;
  height:100px;
  border-width: 0px 20px 0px 20px;
  -webkit-border-radius: 26px;
  -webkit-box-shadow: 0px 7px 30px #666;
  -webkit-border-image:url(images/whiteButton.png) 1 10 2 10;
}

| iphone | 11:18 | comments(0) | trackbacks(0) |
スポンサーサイト
| - | 11:18 | - | - |
コメント
コメントする









この記事のトラックバックURL
http://4creaters.jugem.jp/trackback/130
トラックバック