CSS3 と HTML5 で実装具合の表示テスト

大阪兵庫徳島愛媛高知香川岡山広島鳥取島根山口福岡佐賀熊本長崎大分宮崎鹿児島沖縄	div	ボタン	テキストエリア
大阪兵庫徳島愛媛高知香川岡山広島鳥取島根山口福岡佐賀熊本長崎大分宮崎鹿児島沖縄

<style>
#css3_target * {
	border:1px solid #000;
	color: #000;
	border-radius: 6px;
	background: -moz-linear-gradient(top, #888, #aaa);
	background: -webkit-linear-gradient(top, #888, #aaa);
	background: -o-linear-gradient(top, #888, #aaa);
	background: -ms-linear-gradient:(top, #888, #aaa);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#888888, endColorstr=#aaaaaa)";
	-webkit-box-shadow: 0px 2px 2px 0px #000000;
	box-shadow: 0px 2px 2px 0px #000000;

}
</style>
<div id="css3_target">
<table><tr><td>
<select>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td>
<div style='width:100px;height:100px;'>div</div>
</td>
<td>
<button>ボタン</button>
</td>
<td>
<textarea style="height:80px;">テキストエリア</textarea>
</td>
<td>
<input type="text" value="入力" style='width:100px;' />
</td>
</tr>
<tr>
<td>
<select size=5>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td style='padding:10px;'>
<input type="range" style='width:80px;'/>
</td>
<td colspan="2">
<input type="file" />
</td>
<td>
<input type="date" style='width:100px;' />
</td>
</tr>
</table>
</div>

入力コントロールへの CSS の適用の程度と、HTML5 の要素を幾つか並べてみました。type=range と type=date はとても使いたいコントロールですが、まだまだ実装の程度は低いようです。

※ Firefox のリストボックスは少し異様です
※ IE だけ TD を無視するように見えますが、filter のせいでうまくいってないようです。
※ ここでは、box-shadow を追加しています。

Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Opera 11.64



Safari(Windows) 5.1.5



iPhone



関連する記事

ブラウザ別の角丸とグラデーションの適用状態の比較画像
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator

CSS3

CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました

CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味

CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

Google ストリートビューを表示している class="gm-style"

linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)

現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述

CSS3 : box-shadow の影分身の解説

CSS で画像が立ってるような影を付けて、画像の角は丸くしておく

IE 兼用背景 Fade transition の実装

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

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

CSS3 の borderRadius で、四角から円へのモーフィング

CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript