cssでグラデーションを作ってみた。

はやち

2010.10.21

Web制作

フォトショでグラデーション作るのまんどくせ(・8・)
まじまんどくせ(・8・)
切り出すのもまんどくせ(・8・)

と思い試しにcssだけで作ってみました。

上からのグラデーションの場合

html

<div>
		大丈夫だ、問題ない。
	</div>

css

#enoch{
		color:#fff;
		font-size:20px;
		height:100px;
		padding:10px;

 		 /* For WebKit (Safari, Google Chrome etc) */
 		 background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  		/* For Mozilla/Gecko (Firefox etc) */
  		background: -moz-linear-gradient(top, #00f, #fff);
  		/* For Internet Explorer 5.5 - 7 */
  		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF,endColorstr=#FFFFFFFF);
  		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
	}

左からのグラデーションの場合

html

<div>
		大丈夫だ、問題ない。
	</div>

css

#enoch2{
		color:#fff;
		font-size:20px;
		height:100px;
		padding:10px;

 		 /* For WebKit (Safari, Google Chrome etc) */
 		 background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
 		 /* For Mozilla/Gecko (Firefox etc) */
 		 background: -moz-linear-gradient(left top, #00f, #fff 70%);
  		/* For Internet Explorer 5.5 - 7 */
 		 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
 		 /* For Internet Explorer 8 */
  		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";

中心からのグラデーションの場合

html

<div>
		大丈夫だ、問題ない。
	</div>

css

#enoch3{
		color:#fff;
		font-size:20px;
		height:100px;
		padding:10px;

		/* For WebKit (Safari, Google Chrome etc) */
  		background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
 		 /* For Mozilla/Gecko (Firefox etc) */
  		background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
  		/* For Internet Explorer */
 		 /* As if... */
 		 }

これ使ってちょっとした見出しができて便利＾＾
でも対応してないブラウザのバージョンがあるためあまり使用することはお勧めできないかもです　っ(・ω・｀)