SQLの窓

2012年05月17日


ブラウザ別の角丸とグラデーションの適用状態の比較画像


IFRAME 内に実装したツールですが、どうせなら CSS3 を使って見栄えを簡単に良くしようと思って設定したのですが、検証できるブラウザの見栄えをとりあえず全部チェックしてみました。

角丸 に対しては、ブラウザ依存では無く border-radius: 10px; とだけ指定していますが、一応どのブラウザでも認識しています。ただ、Opera は 入力コントロールは対象では無いようです。Opera Next でも同じです。

当然ですが、IE8 は適用されません。グラデーションは IE4 の時からあるフィルタの IE8 用の記法を使っています。IE9 もその記法が適用されていますが、IE10 は他のブラウザと同様の記法ができるはずです。

※ グラデーションは、ブラウザ依存の記法でないと適用されませんでした。
※ テキストエリアには、resize:none; を指定しています
※ IE のフィルタの色指定は、6ケタで書かないと正しく色が設定されません
※ IE のテキストエリアのスクロールバーの非表示は overflow: auto;
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Safari(Windows) 5.1.5



Opera 11.64



IE8



iPhone



localStorage は、iPhone でも動作しています。
input,textarea {  
	border-radius: 6px;
}
.btn {  
	background: -moz-linear-gradient(top, #aaa, #eee);
	background: -webkit-linear-gradient(top, #aaa, #eee);
	background: -o-linear-gradient(top, #aaa, #eee);
	background: -ms-linear-gradient:(top, #aaa, #eee );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#aaaaaa, endColorstr=#eeeeee)";
}

関連する記事

CSS3 と HTML5 で実装具合の表示テスト
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator


【CSS3の最新記事】
posted by lightbox at 2012-05-17 22:16 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり