css３を使って見る。ボックスシャドウ編

CSS３が発表されましたが、中々使えるものも限られていますね。
何故か　だけが使えないものが多いです。

デザインする上でcssで表示された方が軽くてユーザーのためになると思うのですが、そうはいかないようです。

これは文字の周りにボックスを付け、影を入れたものです。

p{     
  color:#CC0000;
  background-color:#fbe3b7;
  font-size:19px;
  font-weight:bold;
  text-align:center;
  margin:30px 0 0 0;
  border-style : dotted dotted dotted dotted;           
  -webkit-box-shadow: 10px 10px 10px gray;　/*←影の部分*/
}

SafariやGoogle Chromeは表示されますがFirefox3やInternet Explorerは残念ながら表示されないようです。


表示されませんね・・。


導入してくれたら、いいんですがね。

逆のパターンもあります。Internet Explorerでは、cssで<span>要素は表示されますが、その他のブラウザでは表示してくれませんね。


Internet Explorerは表示しますが・・。



このように書かなければいけません。

p.yellow{
   color: #000000;
  background-color:#FFFF00;   /*背景黄色で太字*/
  font-weight:bold;
  -moz-background-color:#FFFF00;
  -webkit-background-color:#FFFF00;
}

その他のブラウザはこれで表示されてます。







ちょっと見栄えは違いますが、画像で重たくなるよりはマシですね。