概要
css3の新要素をまとめます
新規追加タグ
色指定
| プロパティ | 内容 | リンク先 |
|---|---|---|
| hsla,rgba | 色指定時にアルファも同時指定 | http://d.hatena.ne.jp/tbpg/20131001/1380642050 |
背景・ボーダー
| プロパティ | 内容 | リンク先 |
|---|---|---|
| background_clip | セクション | http://d.hatena.ne.jp/tbpg/20120321/1332343381 |
| background_origin | 背景の基準位置 | http://d.hatena.ne.jp/tbpg/20120322/1332424796 |
| background_size | 背景のサイズ | http://d.hatena.ne.jp/tbpg/20120322/1332424989 |
| border-radius | 角丸 | http://d.hatena.ne.jp/tbpg/20120322/1332425200 |
| border-image | 枠線に画像を指定 | http://d.hatena.ne.jp/tbpg/20120322/1332426402 |
| box-decoration-break | ボックスが改行する際の表示形式を指定 ※2012/03/24現在対応ブラウザなし | http://d.hatena.ne.jp/tbpg/20120323/1332515751 |
| box-shadow | ボックスに影をつけます | http://d.hatena.ne.jp/tbpg/20120323/1332516081 |
2D,3D変形
| プロパティ | 内容 | リンク先 |
|---|---|---|
| transform:matrix | 2D変形を行う | http://d.hatena.ne.jp/tbpg/20120326/1332779591 |
| transform:matrix3d | 3D変形を行う | http://d.hatena.ne.jp/tbpg/20120326/1332780244 |
| transform-translate | 表示位置を移動する | http://d.hatena.ne.jp/tbpg/20120326/1332780392 |
| transform-scale | 拡大・縮小する | http://d.hatena.ne.jp/tbpg/20120326/1332780568 |
| transform-rotate | 回転する | http://d.hatena.ne.jp/tbpg/20120326/1332781027 |
| transform-skew | 傾斜変形を行う | http://d.hatena.ne.jp/tbpg/20120327/1332859239 |
| transform-perspective | 奥行きの深さを指定する | http://d.hatena.ne.jp/tbpg/20120327/1332859390 |
| perspective | 奥行きの深さを指定する | http://d.hatena.ne.jp/tbpg/20120328/1332955316 |
| transform-origin | D変形、または、3D変形の原点を指定します | http://d.hatena.ne.jp/tbpg/20120328/1332955480 |
時間的変化
| プロパティ | 内容 | リンク先 |
|---|---|---|
| transition | 時間的変化をまとめて指定する | http://d.hatena.ne.jp/tbpg/20120328/1332956191 |
| transition-property | 時間変化の属性を指定する | http://d.hatena.ne.jp/tbpg/20120330/1333128348 |
| transition-duration | 変化に掛かる時間を指定する | http://d.hatena.ne.jp/tbpg/20120330/1333128819 |
| transition-timing-function | 変化のタイミング・進行割合を指定する | http://d.hatena.ne.jp/tbpg/20120330/1333129151 |
応用
| 内容 | リンク先 |
|---|---|
| transform:rotateで回転画像を作成 | http://d.hatena.ne.jp/tbpg/20120326/1332781320 |
