イヨノート

Design, Code and other chaos included.

CSS3 ジェネレータ

2012.01.11

ベンダープレフィクスごとの分岐を覚えるのはとっくに限界なので、ツールの恩恵に預かっている。

背景

Ultimate CSS Gradient Generator - ColorZilla.com

IE用のfilterを含めて、backgroundのグラデーションを書き出してくれるのが便利だけれど、コメントがキチンと記載されていることが、何より有り難い。

background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(left,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */

ボタン

CSS3 Button Generator

SHOWCASEが意外に面白い。

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #d1c700;
	padding: 12px 26px;
	background: -moz-linear-gradient(
		top,
		#555555 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#555555),
		to(#000000));
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: 1px solid #111111;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.1),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.1),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px 0px 0px rgba(255,255,255,0),
		0px 0px 0px rgba(255,255,255,0);
}