PAGE TOP

CSS3のグラデーションを簡単に!Grad2 -CSS3 Easy Gradation Editor-

グラデーションジェネレーターGRAD2

例えばWeb2.0でよく見かけるAppleサイトのようなメタルな感じのボタンやバー。
CSS3が無い頃は全部画像で作りました。
今はCSSのみできれいなグラデーションを実装できます。
しかし、各種ブラウザに対応させるためのベンダープレフィックスのせいでとにかくコードが長いです。
↓↓↓

CSS3で作ったボタン

上のボタンのCSS

※グラデーションだけでなく、角丸やテキストシャドウ、ボックスシャドウなども使用しています。

.gradation{
	padding:10px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border:1px solid #ddd;
	box-shadow:2px 2px 3px #ddd;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc));
	background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%);
	text-align:center;
	color:#fff;
	font-weight:bold;
	text-shadow:1px 1px 2px #666;
}

長いッ!理解していても書くのが一苦労なのでついつい敬遠しがちですが、これを簡単にしてくれるジェネレーターの紹介です。
使い方も簡単、サイト左上のグラデーションバーに対してそれぞれ色を指定してあげるだけ。
リアルタイムにコードが表示されているのでコピーして自サイトで使います。
垂直または水平以外の角度は自分で指定してやる必要がありますが、とても便利なジェネレーターでいつもお世話になってます。

CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor-


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •