2013/08/22

CSS3の新機能をご紹介!CSS3プロパティまとめ(サンプル付)

CSS3からできるようになったこと。CSS3プロパティまとめ

CSS3から高度な表現を手軽に実装できるようになりました。
以前CSSだけで作るボタンで紹介した他にも多くの機能が実装されていますので、どのようなことができるようになったのか紹介していきたいと思います。

今回の記事は、

を参考にさせて頂きました。

※策定中につき、対応ブラウザが限られているものが多数掲載されています。実際の動作を確認したい場合は、対応ブラウザでご確認下さい。

目次

box sizing [ボックスサイズの算出方法を指定する]

box-sizingは、ボックスサイズの算出方法を指定する際に使用します。

content-box パディングとボーダーを幅と高さに含めない(初期値)
border-box パディングとボーダーを幅と高さに含める
inherit 親要素の値を継承する

box-sizing サンプルコード

.boxsizing {
    width: 200px;
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:1px solid #333333;
}

box-sizing サンプル

ボックスサイズを設定することが出来ます。
widthやheightを指定してサイズを調節可能です。

対応ブラウザ

IE8+, Firefox 2+, Chrome 10+, Safari 5.1+, Opera 9.5+

border radius [角丸を指定する]

ボックスの4つのコーナーの角丸をまとめて指定する際に使用します。

長さ 楕円半径の長さを指定する(初期値は0)
パーセンテージ ボーダーボックスの幅と高さに対する楕円半径のパーセンテージを指定します。

border-radius サンプルコード

.borderRadius {
    -webkit-border-radius: 10px 15px 5px 30px;
    -moz-border-radius: 10px 15px 5px 30px;
    border-radius: 10px 15px 5px 30px;
}

border-radius サンプル

角丸を設定することが出来ます。
左から順に 左上 右上 右下 左下 となります。

対応ブラウザ

IE9+, Firefox 4+, Chrome 5+, Safari 5+, Opera 10.5+

rotate [要素を回転表示する]

transformプロパティのrotate()、rotateX()、rotateY()、rotateZ()、rotate3d()は、要素を回転表示する際に使用します。

rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。
rotateX(回転角度) X軸を軸とする角度によって時計回りの回転を指定します。
rotateY(回転角度) Y軸を軸とする角度によって時計回りの回転を指定します。
rotateZ(回転角度) Z軸を軸とする角度によって時計回りの回転を指定します。
rotate3d(数値, 数値, 数値, 回転角度) rotate3d()関数では、 最初の3つの数値で[x,y,z]の方向ベクトルを決め、最後に指定する回転角度で時計回りの3D回転を指定します。 もし、方向ベクトルが単位長さとなっていない場合には正規化されます。 方向ベクトルが正規化できない数値の場合には、回転が適用されません。

rotate サンプルコード

.rotate {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

rotate サンプル

要素を回転表示することが出来ます。

対応ブラウザ

IE10+, Firefox 16+, Chrome 4+, Safari 3.1+, Opera 12.1+

box shadow [ボックスに影をつける]

ボックスに1つまたは複数の影をつける際に使用します。

none 要素に影をつけない(初期値)
水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可

box-shadow サンプルコード

.boxShadow {
    -webkit-box-shadow: #000 5px 5px 10px 3px inset;
    -moz-box-shadow: #000 10px 10px 10px 3px inset;
    box-shadow: #000 10px 10px 10px 3px inset;
}

box-shadow サンプル

ボックスにシャドウをつけることが出来ます。

対応ブラウザ

IE9+, Firefox 4+, Chrome 10+, Safari 5.1+, Opera 10.5

multiple columns [カラム幅とカラム数を指定する]

カラム幅とカラム数を指定する際に使用します。

個別のプロパティを使用する場合には、カラム幅はcolumn-width、カラム数はcolumn-countで指定しますが、columnsプロパティではこれらをまとめて指定することができます。

column-widthの値 数値で最適な(最善の)カラム幅を指定(初期値はauto)
column-countの値 長さで最適な(最善の)カラム数を指定(初期値はauto)

multiple columns サンプルコード

.columns {
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}

multiple columns サンプル

カラム幅とカラム数を指定することが出来ます。文章が長くなる場合カラムを設定することで可読性が向上する可能性があります。でも今この文章はすごく読みづらいですよね。

対応ブラウザ

IE10+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 11.1+

hsla colors [色相・彩度・明度・透明度の指定]

色相・彩度・明度・透明度を指定することができます。

hslaとは、hue(色相)・saturation(彩度)・luminousity(明度)・alpha(透明)の事で、色相以外の彩度・明度はパーセントで指定する必要があります。

hsla colors サンプルコード

.hsla1 { background-color: hsla(200,0%,50%,1.0);}
.hsla2 { background-color: hsla(200,20%,50%,1.0);}
.hsla3 { background-color: hsla(200,40%,50%,1.0);}
.hsla4 { background-color: hsla(200,60%,50%,1.0);}
.hsla5 { background-color: hsla(200,80%,50%,1.0);}
.hsla6 { background-color: hsla(200,100%,50%,1.0);}

hsla colors サンプル

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

hsla colors SAMPLE

対応ブラウザ

IE9+, Firefox 3+, Chrome 2+, Safari 3.1+, Opera 10.1+

multiple backgrounds [背景画像の複数指定]

背景画像の複数指定が行えます。

multiple backgrounds サンプルコード

.multipleBackgrounds {
    background: url(images/example.png) center center no-repeat,
                url(images/example-2.png) top left repeat;
}

multiple backgrounds サンプル

対応ブラウザ

IE9+, Firefox 3.6+, Chrome 4+, Safari 3.1+, Opera 10.5+

opacity [要素の透明度を指定する]

要素の透明度を指定する際に使用します。

透明度の値 0.0(完全に透明)~1.0(完全に不透明)の範囲で指定する(初期値は1)
inherit 継承する

opacity サンプルコード

.opacity {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; /* for IE8 in IE7 mode */
    filter: alpha(opacity=30); /* for IE6-IE8 */
    opacity: .3;
}

opacity サンプル

要素の透明度を指定することが出来ます。
子要素の透明度もまとめて指定されます。

対応ブラウザ

IE9+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 9+

linear gradients [線形グラデーションを指定する]

線形グラデーションを指定する際に使用します。

線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。

linear gradients サンプルコード

.linearGradients {
    background-image: -moz-linear-gradient(top, #d85e0c, #ffffff); /* FF3.6 */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d85e0c), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
    background-image: -webkit-linear-gradient(top, #d85e0c, #ffffff); /* Safari 5.1+, Chrome 10+ */
    background-image: -o-linear-gradient(top, #d85e0c, #ffffff); /* Opera 11.1+ */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#ffffff'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#ffffff')"; /* IE8+ */
    background-image: linear-gradient(to bottom, #d85e0c, #ffffff);
}

linear gradients サンプル

線形グラデーションを指定することが出来ます。

対応ブラウザ

IE10+, Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 11.6+

radial gradients [円形グラデーションを指定する]

円形グラデーションを指定する際に使用します。

円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、 さらに、グラデーションの形状を定義することで作成されます。

linear gradients サンプルコード

.radialGradients {
    background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#fff), to(#d85e0c)); /* for older webkit */
    background-image: -webkit-radial-gradient(center center, circle closest-corner, #fff 10%, #d85e0c 70%);
    background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #fff 70%);
    background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #d85e0c 70%);
}

linear gradients サンプル

円形グラデーションを指定することが出来ます。

対応ブラウザ

IE10+, Firefox 3.6+, Chrome 10+, Safari 5.1+, Opera 11.6

text shadow [テキストに影をつける]

テキストに影をつける際に使用します。

none テキストに影をつけない(初期値)
水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定する。ぼかし半径と色は省略可

text shadow サンプルコード

.textShadow {
    text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
}

text shadow サンプル

テキストに影を付けることが出来ます。

対応ブラウザ

IE10+, Firefox 3.5+, Chrome 4+, Safari 4+, Opera 9.5+

keyframe animations [アニメーションの指定]

要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する際に使用します。

keyframe animations サンプルコード

.keyframeAnimations {
    -webkit-animation-name: bounceball;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: none;

    -moz-animation-name: bounceball;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: none;

    animation-name: bounceball;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0;
    animation-play-state: running;
    animation-fill-mode: none;
}

@-webkit-keyframes bounceball {
    from {
        bottom: 0;
    }
    to {
        bottom: 60px;
    }
}

@-moz-keyframes bounceball {
    from {
        bottom: 0;
    }

    to {
        bottom: 60px;
    }
}

@keyframes bounceball {
    from {
        bottom: 0;
    }
    to {
        bottom: 60px;
    }
}

keyframe animations サンプル

対応ブラウザ

IE10+, Firefox 5+, Chrome 4+, Safari 4+, Opera 12+

skew [要素を傾斜変形させる]

transformプロパティのskewX()、skewY()、skew()は、要素を傾斜変形させる際に使用します。

skewX(X軸の傾斜角度) skewX()関数では、角度によってX軸に沿った傾斜変形を指定します。
skewY(Y軸の傾斜角度) skewY()関数では、角度によってY軸に沿った傾斜変形を指定します。
skew(X軸の傾斜角度, Y軸の傾斜角度) skew()関数では、2つの角度によってX軸とY軸に沿った傾斜変形を指定します。 最初の角度はX軸の傾斜、2番目の角度はY軸の傾斜です。 2番目の角度は省略することができますが、この場合には0となりY軸は傾斜しません。

skew サンプルコード

.skew {
    -webkit-transform: skew(29deg, -4deg);
    -moz-transform: skew(29deg, -4deg);
    -o-transform: skew(29deg, -4deg);
    -ms-transform: skew(29deg, -4deg);
    transform: skew(29deg, -4deg);
}

skew サンプル

要素を傾斜変形させることが出来ます。

対応ブラウザ

IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

border images [画像ボーダーを指定する]

画像ボーダーについてまとめて指定する際に使用します。

border-imageプロパティでは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatの各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。

border images サンプルコード

.borderImages {
    border-width: 20px;
    -webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
    -moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
    border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
}

skew サンプル

borderに画像を設定することが出来ます。

対応ブラウザ

Chrome 16+, Firefox 15+, Opera 10.5+, Safari 6+

selection color [選択されている位置のテキストの色を取得、設定]

ユーザーに選択されたテキストの背景色と文字色の設定が行えます。

selection color サンプルコード

::selection {
    background: #50bc6b; /* WebKit, Opera, & IE9 */
    color: white;
}

::-moz-selection {
    background: #50bc6b; /* Firefox */
    color: white;
}

selection color サンプル

クリックしたままテキストをなぞってみて下さい

対応ブラウザ

IE9+, Firefox 3+, Chrome 4+, Safari 4+, Opera 10.1+

word wrap [単語の途中で改行するかどうかを指定する]

単語の途中で改行するかどうかを指定する際に使用します。

改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。

normal 改行ポイントでのみ改行する(初期値)
break-word 行の中に他の改行ポイントが無い場合には、単語途中でも改行する

word wrap サンプルコード

.wordWrap {
    word-wrap: break-word; /* or "normal" */
}

word wrap サンプル

試しに長い単語をつぶやいてみます。超微視的珪質火山塵肺疾患の英語読みは、ニューモノウルトラマイクロスコーピックシリコヴォルケーノコニオシス(Pneumonoultramicroscopicsilicovolcanoconiosis)です。

対応ブラウザ:IE5.5+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

transform origin [2D変形、または、3D変形の原点を指定する]

要素に2D変形、または、3D変形を適用するときの変形の原点を指定する際に使用します。

パーセンテージ 変形を適用する要素の左上位置(0%,0%)からのパーセンテージ、および、3Dの場合にはZ軸方向の長さを指定(初期値は50% 50% 0)
長さ 変形を適用する要素の左上位置(0,0)からの長さを指定、3D変形では左上位置(0,0,0)からの長さを指定
キーワード 水平方向はleft・center・right、垂直方向はtop・center・bottom、および、3Dの場合にはZ軸方向の長さを指定

transform origin サンプルコード

.transformOrigin {
    -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
}

transform origin サンプル

2D変形、または、3D変形の原点を指定することができます。

対応ブラウザ

IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

scale [要素を拡大・縮小表示する]

transformプロパティのscale()、scaleX()、scaleY()、scaleZ()、scale3d()は、要素を拡大、または、縮小表示する際に使用します。

scale サンプルコード

.scale {
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -o-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}

scale サンプル

スタイルロゴ

対応ブラウザ

IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

text stroke [袋文字(文字の輪郭線)を指定する]

文字の輪郭線を指定することが出来ます。

text stroke サンプルコード

.textStroke {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-color: #d78965;
    -webkit-text-stroke-width: 3px;
    text-fill-color: #fff;
    text-stroke-color: #d78965;
    text-stroke-width: 3px;
}

text stroke サンプル

文字の輪郭線を指定することが出来ます。

対応ブラウザ

Chrome 4+, Safari 3.1+

space and round [画像の繰り返し方法を指定する]

space and round サンプルコード

.spaceAndRound {
    background: url(bg.png) space 0 0;
}

text stroke サンプル

こちらはCSS3's space and round Values for background-repeatを参照下さい。

対応ブラウザ

IE9+, Opera 10.5+

rgba colors [RGBAカラーモデルで色を指定する]

RGBAカラーモデルで色を指定する際に使用します。

RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。 alphaは色の透明度を表します。

rgba colors サンプルコード

.rgbaColors {
    background: rgba(240, 135, 167, .2);
}

rgba colors サンプル

RGBAカラーモデルで色を指定することが出来ます。

対応ブラウザ

IE9+, Firefox 3+, Chrome 2+, Safari 3.1+, Opera 10.1+

background size [背景画像のサイズを指定する]

背景画像のサイズを指定する際に使用します。

長さやパーセンテージで指定する場合、値を2つ記述すると、それぞれ記述した順に幅と高さを表します。1つだけ指定した場合には、もう1つはautoと解釈されます。負の値を指定することはできません。

auto 自動的に算出される(初期値)
contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
長さ 背景画像の幅・高さを指定する
パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

background size サンプルコード

.backgroundSize {
    background: url(../images/example.png) no-repeat center center;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}

background size サンプル

対応ブラウザ

IE9+, Firefox 4+, Chrome 4+, Safari 3.1+, Opera 10.5+

resize [ユーザーが要素のサイズを変更できるかどうかを指定する]

ユーザーが要素のサイズを変更できるかどうかを指定する際に使用します。

ユーザーによる要素のリサイズを許可する場合、 リサイズを許可する要素にはresizeプロパティと同時に overflowプロパティのvisible以外の値を指定する必要があります。

none ユーザーに要素のリサイズ機能を提供しない(初期値)
both ユーザーに要素の幅と高さのリサイズ機能を提供する
horizontal ユーザーに要素の幅のリサイズ機能を提供する
vertical ユーザーに要素の高さのリサイズ機能を提供する
inherit 親要素の値を継承する

resize サンプルコード

.resize {
    overflow: hidden; /* must be "hidden", "scroll", or "auto" */
    -moz-resize: both; /* for Firefox 4+ */
    resize: both; /* can also be "none", "horizontal", or "vertical" */
}

resize サンプル

要素のサイズをユーザーが自由に変更することが出来ます。

対応ブラウザ

Chrome 4+, Safari 4+, Firefox, Opera 12.1+(テキストエリアのみ)

media queries [スタイルシートの割り振りを指定する]

スクリーンのサイズを読み取り、読み込ませるCSSを振り分けることが出来ます。

media queries サンプルコード

@media (max-width: 900px) {

    .element {
        background: #bada55;
    }

}

@media (max-width: 480px) {

    .element {
        background: #d78965;
    }

}

media queries について

詳しくは以前ご紹介したスマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。をご参照下さい。

対応ブラウザ

IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1, Opera 9.5

transitions [transition効果(時間的変化)をまとめて指定する]

transition効果(時間的変化)をまとめて指定する際に使用します。

transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値を、まとめて指定することができます。

このプロパティでは、値を指定する順序が重要となります。 時間として指定される最初の値はtransition-durationに割り当てられ、 時間として指定される二番目の値はtransition-delayに割り当てられます。

transitions サンプルコード

.transitions {
    background-color: red;
    -webkit-transition: background-color linear .8s;
    -moz-transition: background-color linear .8s;
    -o-transition: background-color linear .8s;
    transition: background-color linear .8s;
}

.transitions:hover {
    background-color: blue;
}

transitions サンプル

時間的変化を指定することが出来ます。マウスオーバーしてみて下さい。

対応ブラウザ

IE10+, Firefox 4+, Chrome 4+, Safari 3.1+, Opera 10.5+

translate [要素の表示位置を移動させる]

transformプロパティのtranslate ()、translateX()、translateY()、translateZ()、translate3d()は、要素の表示位置を移動させる際に使用します。

translate(X方向の距離, Y方向の距離) translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX(X方向の距離) translateX()関数では、X方向の距離で移動を指定します。
translateY(Y方向の距離) translateY()関数では、Y方向の距離で移動を指定します。
translateZ(Z方向の距離) translateZ()関数では、Z方向の距離で移動を指定します。 translateZ()関数にはパーセンテージ値を指定することができないので注意してください。 もし、パーセンテージで値を指定しても0と同じになります。
translate3d(X方向の距離, Y方向の距離, Z方向の距離) translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]

translate サンプルコード

.translate {
    -webkit-transform: translate(25px, 50px);
    -moz-transform: translate(25px, 50px);
    -o-transform: translate(25px, 50px);
    -ms-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
}

translate サンプル

要素の表示位置を移動させることが出来ます。

対応ブラウザ

IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

reflections [画像の反射(リフレクション)を指定する]

要素の反射(リフレクション)を表現することが出来ます。

reflections サンプルコード

.reflections {
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}

reflections サンプル

要素の反射を表現することが出来ます。

対応ブラウザ

Chrome 4+, Safari 4+

@font-face [Webフォントの指定]

@font-face サンプルコード

@font-face {
    font-family: 'Font Name';
    src: url('../fonts/fontname-webfont.eot');
    src: url('../fonts/fontname-webfont.eot?iefix') format('eot'),
         url('../fonts/fontname-webfont.woff') format('woff'),
         url('../fonts/fontname-webfont.ttf') format('truetype'),
         url('../fonts/fontname-webfont.svg#webfontjSpbZQRv') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fontFace {
    font-family: 'Font Name', 'fallback font', serif;
}

@font-face サンプル

this font is "Grand Hotel".http://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Grand+Hotel

対応ブラウザ

IE6+, Firefox 3.5+, Chrome 4+, Safari 3.2+, Opera 10+

background clip [背景の適用範囲を指定する]

背景の適用範囲を指定する際に使用します。

border-box 背景をボーダーボックスに適用する(初期値)
padding-box 背景をパティングボックスに適用する
content-box 背景をコンテントボックスに適用する

background clip サンプルコード

.backgroundClip {
    background: #d78965;
    padding: 30px;	
    -webkit-background-clip: content-box;
    -moz-background-clip: content-box;
    -ms-background-clip: content-box;
    background-clip: content-box; /* border-box, padding-box */
}

background clip サンプル

背景画像の適応範囲を指定することが出来ます。

対応ブラウザ

IE9+, Firefox 4+, Chrome 4+, Safari 5+, Opera 10.5+

background origin [背景の基準位置を指定する]

背景の基準位置を指定する際に使用します。

padding-box 背景をパディングボックスに対して相対的に適用する(初期値)
border-box 背景をボーダーボックスに対して相対的に適用する
content-box 背景をコンテントボックスに対して相対的に適用する

background origin サンプルコード

.backgroundOrigin {
    background: #d78965;
    border: solid 1px white;
    -webkit-background-origin: content-box;
    -moz-background-origin: content-box;
    -o-background-origin: content-box;
    -ms-background-origin: content-box;
    background-clip: content-box; /* padding box, border-box */
    padding: 30px;
}

background origin サンプル

背景の基準位置を指定することが出来ます。

対応ブラウザ

IE9+, Firefox 4+, Chrome 4+, Safari 3+, Opera 10.5+

まとめ

今回はCSS3のプロパティとエフェクトを一覧でご紹介しました。
CSS3だけで出来ることの幅が広がったことも驚きですが、JavaScriptなどと組み合わせることでさらに表現の幅を広げることが出来ます。

ぜひ実際に触ってみて感性を刺激してみてください。新たな発想が湧き上がってくるかもしれません。