CSS3 デモ＆サンプル

CSS の記述プロパティや値の先頭に付く -moz- や -webkit- とは

参考：HTMLクイックリファレンス

　　　⇒ベンダープレフィックス−CSSの基本

便利なオンラインツール

CSS3 Generator

Animate.css

animatable

HSL Color Picker

border-image-generator

Ultimate CSS Gradient Generator

CSS Text Shadow

CSS Arrow Please

Layer Styles

サンプル一覧

• 角丸
• シャドウ
• グラデーション
• アニメーション
• 変形処理

角丸

角丸/一括指定



角丸/一括個別指定

左上 右上 右下 左下 の順に指定する



角丸/個別指定

/* 角丸/一括指定 */
div.border-radius {
	border-radius: 30px;
}

/* 角丸/一括個別指定 */
div.border-radius2 {
				/* 左上 右上 右下 左下 の順に指定する */
	border-radius: 10px 20px 30px 40px;
}

/* 角丸/個別指定 */
div.border-radius3 {
	/* 左上 */
	border-top-left-radius:10px;

	/* 右上 */
	border-top-right-radius:20px;

	/* 右下 */
	border-bottom-right-radius:30px;

	/* 左下 */
	border-bottom-left-radius:40px;
}

シャドウ

テキストシャドウ

text-shadow:横方向のずれ 下方向のずれ ぼかし具合 影の色;



テキストシャドウ/複数指定

カンマ（,）区切りで複数指定ができます。



ボックスシャドウ

box-shadow:横方向のずれ 下方向のずれ ぼかし具合 影の色;



ボックスシャドウ

カンマ（,）区切りで複数指定ができます。

/* テキストシャドウ */
div.text-shadow {
	text-shadow:1px 1px 3px #000;
}

/* テキストシャドウ/複数指定 */
div.text-shadow2 {
	text-shadow:0 -5px 5px #f00, -5px 0 5px #00f, 5px 0 5px #000;
}

/* ボックスシャドウ */
div.box-shadow {
	box-shadow:1px 1px 3px #000;
}

/* ボックスシャドウ/複数指定 */
div.box-shadow2 {
	box-shadow:0 0 4px #f00, 0 0 12px #00f, 5px 5px 5px #000;
}

グラデーション

グラデーション

上から下



グラデーション

左から右



グラデーション

左上から右下



グラデーション

左下から右上



グラデーション

途中に色を追加



グラデーション

円

/* グラデーション/上から下 */
div.linear-gradient {
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff0000 0%, #0000ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ff0000 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ff0000 0%,#0000ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ff0000 0%,#0000ff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ff0000 0%,#0000ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */
}

/* グラデーション/左から右 */
div.linear-gradient2 {
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(left,  #ff0000 0%, #0000ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ff0000 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #ff0000 0%,#0000ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #ff0000 0%,#0000ff 100%); /* IE10+ */
	background: linear-gradient(to right,  #ff0000 0%,#0000ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 */
}

/* グラデーション/左上から右下 */
div.linear-gradient3 {
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ff0000 0%, #0000ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff0000), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #ff0000 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #ff0000 0%,#0000ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #ff0000 0%,#0000ff 100%); /* IE10+ */
	background: linear-gradient(135deg,  #ff0000 0%,#0000ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* グラデーション/左下から右上 */
div.linear-gradient4 {
	background: #ff0000; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #ff0000 0%, #0000ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ff0000), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  #ff0000 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  #ff0000 0%,#0000ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  #ff0000 0%,#0000ff 100%); /* IE10+ */
	background: linear-gradient(45deg,  #ff0000 0%,#0000ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* グラデーション/途中に色を追加 */
div.linear-gradient5 {
    background: #880000; /* Old browsers */
    background: -moz-linear-gradient(left,  #880000 0%, #888800 25%, #008800 50%, #008888 75%, #880088 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#880000), color-stop(25%,#888800), color-stop(50%,#008800), color-stop(75%,#008888), color-stop(100%,#880088)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #880000 0%,#888800 25%,#008800 50%,#008888 75%,#880088 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #880000 0%,#888800 25%,#008800 50%,#008888 75%,#880088 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #880000 0%,#888800 25%,#008800 50%,#008888 75%,#880088 100%); /* IE10+ */
    background: linear-gradient(to right,  #880000 0%,#888800 25%,#008800 50%,#008888 75%,#880088 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#880000', endColorstr='#880088',GradientType=1 ); /* IE6-9 */
}

/* グラデーション/円 */
div.radial-gradient {
	background: #ff0000; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #ff0000 0%, #0000ff 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ff0000), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #ff0000 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #ff0000 0%,#0000ff 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #ff0000 0%,#0000ff 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #ff0000 0%,#0000ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

アニメーション

マウスをあてると、1秒後に2秒かけて背景の色が徐々に変わります。

div.transition {
    /* webkit */
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;
    
    /* moz */
    -moz-transition-property: background-color;
    -moz-transition-duration: 2s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 1s;
    
    /* ms */
    -ms-transition-property: background-color;
    -ms-transition-duration: 2s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: 1s;
    
    /* o */
    -o-transition-property: background-color;
    -o-transition-duration: 2s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 1s;
    
    transition-property: background-color; /* 対象のプロパティ */
    transition-duration: 2s; /* アニメーションにかかる時間を指定する */
    transition-timing-function: linear; /* 変化のタイミング・進行割合を指定する */
    transition-delay: 1s; /* 遅延時間を指定する */
}
div.transition:hover {
    background-color: #fee;
}

アニメーション/一括・複数指定

transition-property, transition-duration, transition-timing-function, transition-delay をまとめて指定する事もできます。

transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
カンマ（,）を使用する事により複数指定する事も出来ます。

div.transition {
    -webkit-transition:background-color 2s linear 1s;
    -moz-transition:background-color 2s linear 1s;
    -ms-transition:background-color 2s linear 1s;
    -o-transition:background-color 2s linear 1s;
    transition:background-color 2s linear 1s;
}
div.transition:hover {
    background-color: #fee;
}
div.transition2 {
    -webkit-transition:background-color 3s linear, color 2s linear, border-color 1s linear;
    -moz-transition:background-color 3s linear, color 2s linear, border-color 1s linear;
    -ms-transition:background-color 3s linear, color 2s linear, border-color 1s linear;
    -o-transition:background-color 3s linear, color 2s linear, border-color 1s linear;
    transition:background-color 3s linear, color 2s linear, border-color 1s linear;
}
div.transition2:hover {
    background-color:#800000;
    color:#fff;
    border-color:#ff0000;
}

アニメーションの変化のパターン

default（ease：開始と完了を滑らかにする）
linear（一定のスピード）
ease-in（ゆっくり始まる）
ease-out（ゆっくり終わる）
ease-in-out（ゆっくり始まってゆっくり終わる）
cubic-bezier() 4つの数字をカンマ区切りで指定

div.transition-timing-function div {
    width:100px;
    line-height:30px;
    background:#fee;
    padding:5px;
    margin:10px;

    -webkit-transition-duration:3s;
    -moz-transition-duration:3s;
    -ms-transition-duration:3s;
    -o-transition-duration:3s;
    transition-duration: 3s;
}

div.transition-timing-function:hover div {
    -webkit-transform:translate(480px,0);
    -moz-transform:translate(480px,0);
    -ms-transform:translate(480px,0);
    -o-transform:translate(480px,0);
    transform:translate(480px,0);
}

.ease {
    -webkit-transition-timing-function:ease;
    -moz-transition-timing-function:ease;
    -ms-transition-timing-function:ease;
    -o-transition-timing-function:ease;
    transition-timing-function:ease;
}
.linear {
    -webkit-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -ms-transition-timing-function:linear;
    -o-transition-timing-function:linear;
    transition-timing-function:linear;
}
.ease-in {
    -webkit-transition-timing-function:ease-in;
    -moz-transition-timing-function:ease-in;
    -ms-transition-timing-function:ease-in;
    -o-transition-timing-function:ease-in;
    transition-timing-function:ease-in;
}
.ease-out {
    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}
.ease-in-out {
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out;
}
.cubic-bezier {
    -webkit-transition-timing-function:cubic-bezier(.17,.67,.83,.67);
    -moz-transition-timing-function:cubic-bezier(.17,.67,.83,.67);
    -ms-transition-timing-function:cubic-bezier(.17,.67,.83,.67);
    -o-transition-timing-function:cubic-bezier(.17,.67,.83,.67);
    transition-timing-function:cubic-bezier(.17,.67,.83,.67);
}

変形処理

回転

div.rotate {
    width:100px;
    height:100px;
    line-height:100px;

    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

拡大・縮小 transform:scale(xy[x,y]);

50x50
scale(2)
scale(0.5,2)
scale(2,0.5)

div[class*='scale'] {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin-right: 50px;
}
div.scale-1 {
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -ms-transform:scale(2);
    -o-transform:scale(2);
    transform:scale(2);
}
div.scale-2 {
    -webkit-transform:scale(0.5,2);
    -moz-transform:scale(0.5,2);
    -ms-transform:scale(0.5,2);
    -o-transform:scale(0.5,2);
    transform:scale(0.5,2);
}
div.scale-3 {
    -webkit-transform:scale(2,0.5);
    -moz-transform:scale(2,0.5);
    -ms-transform:scale(2,0.5);
    -o-transform:scale(2,0.5);
    transform:scale(2,0.5);
}

X軸，Y軸へのゆがみ transform:skew(xy[x,y]deg);

100x50
skew(10deg)
skew(0,-10deg)
skew(10deg,0)

div[class*='skew'] {
    width: 100px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin-right: 10px;
}
div.skew-1 {
    -webkit-transform:skew(10deg);
    -moz-transform:skew(10deg);
    -ms-transform:skew(10deg);
    -o-transform:skew(10deg);
    transform:skew(10deg);
}
div.skew-2 {
    -webkit-transform:skew(0,-10deg);
    -moz-transform:skew(0,-10deg);
    -ms-transform:skew(0,-10deg);
    -o-transform:skew(0,-10deg);
    transform:skew(0,-10deg);
}
div.skew-3 {
    -webkit-transform:skew(10deg,0);
    -moz-transform:skew(10deg,0);
    -ms-transform:skew(10deg,0);
    -o-transform:skew(10deg,0);
    transform:skew(10deg,0);
}

移動 transform:translate(xy[x,y]);

200x50
translate(100px)
translate(0,100px)
translate(300px,0)

div[class*='translate'] {
    width:200px;
    height: 50px;
    line-height: 50px;
}
div.translate-1 {
    -webkit-transform:translate(100px);
    -moz-transform:translate(100px);
    -ms-transform:translate(100px);
    -o-transform:translate(100px);
    transform:translate(100px);
}
div.translate-2 {
    -webkit-transform:translate(0,100px);
    -moz-transform:translate(0,100px);
    -ms-transform:translate(0,100px);
    -o-transform:translate(0,100px);
    transform:translate(0,100px);
}
div.translate-3 {
    -webkit-transform:translate(300px,0);
    -moz-transform:translate(300px,0);
    -ms-transform:translate(300px,0);
    -o-transform:translate(300px,0);
    transform:translate(300px,0);
}