ＳＱＬの窓
<< 注意 : フィッシン… | TOP | オンラインで『Word… >>

2013年08月16日


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

 



 
 

 

<style type="text/css">
#linear-gradient {
	width: 400px;
	height: 200px;
	border: solid 1px #000000;
	border-radius: 20px;
	background: linear-gradient(to bottom, #000, #d00);
}

#linear-gradient-old {
	width: 400px;
	height: 200px;
	border: solid 1px #000000;
	border-radius: 20px;
	background: -moz-linear-gradient(top, #000, #d00);
	background: -webkit-linear-gradient(top, #000, #d00);
	background: -o-linear-gradient(top, #000, #d00);
	background: -ms-linear-gradient(top, #000, #d00);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#dd0000)";
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#dd0000);
}
</style>










IE9 以外の環境は一通りあるので、全て試してみましたが、#linear-gradient-old である必要(▲)があるのは IE(や他) の古いバージョン対応をしようとした時だけです。しかも、IEは バージョンによって filter でさえ書き方が複数あるようで・・・・。一応、IE10 の開発者ツールで『ドキュメントモード』を変更して確認できます。

IE10 の ドキュメントモード変更



ですが、IE10 より前の事(と Safari)を忘れるのであれば、シンプルな記述で表現を楽しめるように(やっと)なったようです。




linear-gradient のみ








to left bottom



to right bottom



to left top



to right top







旧設定(ブラウザ依存)






























































【CSS3の最新記事】

























posted by lightbox at 2013-08-16 19:56 




| CSS3
| このブログの読者になる
| 更新情報をチェックする



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり