[CSS] 基本メモ: 幾何変換 傾斜

サンプル

transform-skew-1

transform-skew-2

transform-skew-3

transform-skew-4

参考サイト

transform:skew()-CSS3リファレンス
http://www.htmq.com/css3/transform_skew.shtml

[CSS] 基本メモ: 幾何変換 回転

サンプル

transform-rotate-1

transform-rotate-2

transform-rotate-3

transform-rotate-4

参考サイト

transform:rotate()-CSS3リファレンス
http://www.htmq.com/css3/transform_rotate.shtml

[CSS] 基本メモ: 幾何変換 移動

サンプル

transform-translate-1

transform-translate-2

transform-translate-3

参考サイト

transform:translate()-CSS3リファレンス
http://www.htmq.com/css3/transform_translate.shtml

[CSS] 基本メモ: 幾何変換 スケーリング

サンプル

transform-scale-1

transform-scale-2

transform-scale-3

transform-scale-4

参考サイト

transform:scale()-CSS3リファレンス
http://www.htmq.com/css3/transform_scale.shtml

[CSS] 基本メモ: 円形グラデーション

書式
radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

Google Chrome 及び Safariの実装
-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));

サンプル

radial-gradient-1

radial-gradient-2

radial-gradient-3

参考サイト

radial-gradient()-CSS3リファレンス
http://www.htmq.com/css3/radial-gradient.shtml

[CSS] 基本メモ: 線形グラデーション

書式
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

(Google Chrome 及び Safariの実装)
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));

サンプル

linear-gradient-1

linear-gradient-2

linear-gradient-3

linear-gradient-4

参考サイト

linear-gradient()-CSS3リファレンス
http://www.htmq.com/css3/linear-gradient.shtml

[CSS] 基本メモ: テキストに影をつける

書式
水平方向の距離 垂直方向の距離 影のぼかし半径 影の色

サンプル

text-shadow-1

text-shadow-2

text-shadow-3

参考サイト

text-shadow-CSS3リファレンス
http://www.htmq.com/css3/text-shadow.shtml

[CSS] 基本メモ: ボックスに影をつける

書式
box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset;

サンプル

box-shadow-1

box-shadow-2

box-shadow-3

box-shadow-4

box-shadow-5

参考サイト

box-shadow-CSS3リファレンス
http://www.htmq.com/css3/box-shadow.shtml