CSS3メモ

今のところちょくちょく見るプロパティをまとめた。
HTML5よりもブラウザごとの実装が状況がまちまちな気がしてる。
WebKitブラウザが独走してる感じ。

■フォントサイズを調整するプロパティ

iPhoneやiPod Touch などで画面の向きを変えたときに、
自動で文字サイズが変わるのを調整する。

-webkit-text-size-adjust: none;

値をnoneにすると自動調整をしないようにできる。

■テキストに影をつけるプロパティ

text-shadow: 0 1px 3px #000000;

順番に水平方法、垂直方向、ぼかし距離を指定。最後は影の色。

■ボックス要素に影をつけるプロパティ

-webkit-box-shadow: 0 1px 3px #000000;
-moz-box-shadow: 0 1px 3px #000000;

順番に水平方法、垂直方向、ぼかし距離を指定。最後は影の色。

■グラデーションをつける

backgroundプロパティと組み合わせて使う。

background: -webkit-gradient(
		linear, left top, left bottom,
		from(#eeeeee),
		to(#ffffff)
	);
background: -moz-linear-gradient(top, #eeeeee, #ffffff);

webkitの場合は開始位置、終了位置、開始時の色、終了時の色。
mozillaの場合は

• top:上から下
• left:左から右
• left top:左上から右下

あとは開始時の色、終了時の色。

■背景画像のサイズ

背景に使う画像のサイズを指定する。
背景画像のみをサイズ調整できる。

background-size: 432px 192px;

■文字や画像にマスクをかける

要素の上になにかを重ねる(?)プロパティ。
z-indexとの違いはよくわからないけど、
透過pngを指定したときに透過pngの形に切り抜かれる。

-webkit-mask-image: url(circle.png);