[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラｰビリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
クロスブラウザで動作するCSSグラデーション – creamu
CSSでグラデーションを表現したい。 そんなときにおすすめなのが、『Cross-Browser CSS Gradient』。クロスブラウザで動作するCSSグラデーションです。 画像を使わずに、ブラウザ上でグラデーションを描く方法ですね。CSS3の書き方ではFirefox3.6+やSafari4、Google ChromeなどのモダンブラウザにCSS Gradientsが効きますが、IEには対応していません。 そのため、IE用にfilterの記述を追加したものになっています。 IEのfilterでは、水平か垂直方向の2色のグラデーションしかできないため、それに対応させた書き方になっているようです。シンプルなグラデーションを表現したいときにはいいかもですね。 一度見てみてください。 Cross-Browser CSS Gradient 一つ挽回。 久々に服を買いたくなってきました。週末に見に行
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
