概要
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 |