Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

css3の新要素

概要

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