IEでもそこそこできる!CSSで作る画像のようなボタン

今日、CSS3の勉強になるかも!?画像を使わないボタンの作成手順という記事を書いたのですが、IEに対応していないと残念に思われた方もいらっしゃるようですのでIEでも作ってみます。

css3-pie-button.png

すべて再現できるわけではないですが、CSS3 PIEを使えばそこそこ再現できます。

別サーバーにサンプルを用意してみました - サンプル

CSS3 PIE

CSS3 PIE

これを使えば、IE6~9でも、border-radiusやbox-shadowなどのCSS3プロパティが使えます。

HTMLはそのままです。

html
<a href="#" id="button">button</a>

CSSはこんな感じです。

CSS
#button {
  width:320px;
  color:#e4eef8;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 1px #143352;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:12px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  background:-ms-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-o-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  -pie-background: linear-gradient(#77aadd, #225588);
  box-shadow:0px 1px 0px #1b446d,
             0px 2px 0px #1b446d,
			 0px 3px 0px #1b446d,
			 0px 4px 0px #1b446d,
			 0px 5px 0px #1b446d,
			 0px 6px 0px #1b446d,
			 0px 7px 0px #1b446d,
			 2px 7px 3px rgba(0,0,0,0.3),
			 0px 1px 0px rgba(255,255,255,0.5) inset,
			 0px -1px 0px rgba(255,255,255,0.2) inset;
  behavior: url(PIE.htc);
}

19行目でIE6~8用のグラデーションになります。border-radiusやbox-shadowはそのままで大丈夫ですが、グラデーションは「-pie-background」という専用のプロパティを使います。

あと、グラデーションにRGBAカラーが使えなかったのでカラーコードを使っています。

30行目でPIE.htcを読み込んでいます。PIE.htcはCSS3 PIEでダウンロードして、HTMLファイルと同じ階層にアップロードしています。

CSS3 PIEを使ってもどうしようもないのはところもあります。

  • box-shadowのinsetは使えない
  • hoverには使えない
  • グラデーションはIE9には対応していない

最後のIE9のグラデーションについては以下で紹介されています。

個人的にはIEのためにそこまでしたくないというのが本音です。

ということで、完全には対応できないもののある程度は対応できるけど、やっぱりもどかしいIEの話でした。

急いで作りましたが参考になれば幸いです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加