HTML Living Standard　　第２部 CSS　８ 変形

 

８　変形

変形、クリッピング、マスキング、フィルターについて説明します。


８．１　　変形

要素に2D変形、または、3D変形を適用するときに使用します。

transformプロパティの値に、用意されている transform 関数を指定することで、 要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用することができます。

transform 関数を空白で区切って複数指定することで、複数の transform 効果を適用することもできます。 この場合、最終的に要素に適用されるのは、それぞれの transform 関数の値を結合したものとなります。

８．１．１　　変形　(transform)

移動、拡大、縮小、回転、傾斜などの変形について説明します。

変形には変形関数を指定します。変形関数は、半角スペースで区切って複数指定することができます。この場合、最終的に要素に適用される効果は、それぞれの変形をミックスしたものになります。

変形関数には「2D 変形関数」と「3D 変形関数」の 2 種類があります。

2D 変形は、X軸（水平）、Y軸（垂直）の 2方向に要素を変形させます。

3D 変形は、X軸（水平）、Y軸（垂直）、Z軸（奥行き）の3方向に要素を変形させます。

transform:属性値

変形関数を指定する。

属性値説明
none要素を変形させない（規定値）
変形関数2D 変形関数
translateXX 方向への移動
translateYY 方向への移動
translateX 方向、Y 方向への移動
scaleXX 方向への拡大縮小
scaleYY 方向への拡大縮小
scaleX 方向、Y 方向への拡大縮小
rotate要素の中央を中心にした回転
skewXX 方向への傾斜度
skewYY 方向への傾斜度
matrixX 方向、Y 方向への拡大縮小率、傾斜角度、移動
3D 変形関数
translateZZ 方向への移動
translate3dX 方向、Y 方向、Z 方向への移動
scaleZZ 方向への拡大縮小
scale3dX 方向、Y 方向、Z 方向への拡大縮小
rotateXX 方向を軸とする回転（ rotate3d(1, 0, 0, angle) と同じ）
rotateYY 方向を軸とする回転（ rotate3d(0, 1, 0, angle) と同じ）
rotateZZ 方向を軸とする回転（ rotate3d(0, 0, 1, angle) と同じ）
rotate3d3D 回転
matrix3dX 方向、Y 方向、Z 方向への拡大縮小、傾斜、移動

（１）　　2D 変形関数

（１－１） translateX

要素を X 方向に 2D 移動します。

transform:translateX(属性値)

要素を X 方向に 2D 移動する。

属性値説明
X 方向距離数値＋単位
記述例
<img src="bear.png" style="transform: translateX(50px);">

本来の位置（黄色の部分）から X 方向に 50px 移動しています。

表示例

（１－２） translateY

要素を Y 方向に 2D 移動します。

transform:translateY(属性値)

要素を Y 方向に 2D 移動する。

属性値説明
Y 方向距離数値＋単位
記述例
<img src="bear.png" style="transform: translateY(20px);">

本来の位置（黄色の部分）から Y 方向に 20px 移動しています。

表示例

（１－３） translate

要素を X 方向と Y 方向に 2D 移動します。

transform:translate(属性値,属性値)

要素を X 方向と Y 方向に 2D 移動する。

属性値説明
X 方向距離数値＋単位
Y 方向距離数値＋単位（規定値：0px）
記述例
<img src="bear.png" style="transform: translate(50px,20px);">

本来の位置（黄色の部分）から X 方向に 50px、Y 方向に 20px 移動しています。

表示例

（１－４） scaleX

要素を X 方向に 2D 拡大・縮小します。

transform:scaleX(属性値)

要素を X 方向の中央を基準に左右に拡大・縮小する。

拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
倍率1以上で拡大、1未満で縮小
記述例
<img src="bear.png" style="transform: scaleX(1.5);">

本来の位置（黄色の部分）から X 方向に 1.5倍にしています。

表示例

（１－５） scaleY

要素を Y 方向に 2D 拡大・縮小します。

transform:scaleY(属性値)

要素を Y 方向の中央を基準に上下に拡大・縮小する。

拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
倍率1以上で拡大、1未満で縮小
記述例
<img src="bear.png" style="transform: scaleY(1.2);">

本来の位置（黄色の部分）から Y 方向に 1.2倍にしています。

表示例

（１－６） scale

要素を X 方向、 Y 方向に 2D 拡大・縮小します。

transform:scale(属性値,属性値)

要素を X 方向、 Y 方向の中央を基準に拡大・縮小する。

拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
X 方向倍率1以上で拡大、1未満で縮小
Y 方向倍率1以上で拡大、1未満で縮小（規定値：1）
記述例
<img src="bear.png" style="transform: scale(1.5,1.2);">

本来の位置（黄色の部分）から X 方向に 1.5倍、Y 方向に 1.2倍にしています。

表示例

（１－７） rotate

要素の中央を中心に時計回りの 2D 回転を指定します。

transform:rotate(属性値)

要素の中央を中心に時計回りの 2D 回転を指定する。

回転の中心点を変更する場合は transform-origin で指定する。

属性値説明
回転角度数値＋単位
記述例
<img src="bear.png" style="transform: rotate(60deg);">

本来の位置（黄色の部分）から 画像の中央を中心に時計回りに 60°回転しています。

表示例

（１－８） skewX

要素の中央を中心に X 軸方向への傾斜を指定します。

transform:skewX(属性値)

要素の中央を中心に X 軸方向への傾斜を指定する。

傾斜の基準を変更する場合は transform-origin で指定する。

属性値説明
傾斜角度数値＋単位
記述例
<img src="bear.png" style="transform: skewX(30deg);">

本来の位置（黄色の部分）から X 軸方向に 30°傾斜しています。

表示例

（１－９） skewY

要素の中央を中心に Y 軸方向への傾斜を指定します。

transform:skewY(属性値)

要素の中央を中心に Y 軸方向への傾斜を指定する。

傾斜の基準を変更する場合は transform-origin で指定する。

属性値説明
傾斜角度数値＋単位
記述例
<img src="bear.png" style="transform: skewY(30deg);">

本来の位置（黄色の部分）から Y 軸方向に 30°傾斜しています。

表示例

（１－１０） matrix

行列を使用して要素に 2D 変形します。

transform:matrix(sx,ay,ax,sy,tx,ty)

行列を使用して要素に 2D 変形する。単位はつけない

傾斜や拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
sxX 方向への拡大・縮小率
ayY 方向への傾斜率
axX 方向への傾斜率
syY 方向への拡大・縮小率
txX 方向への移動距離
tyY 方向への移動距離
記述例
<img src="bear.png" style="transform: matrix(0.8, 0, -0.5, 0.8, 20, 10);">

図形を X 方向、Y 方向とも 80% にし、本来の位置（黄色の部分）から X 軸方向に -0.5ラジアン傾斜させ、X 方向に 20px、Y 方向に 10px 移動しています。

同じように表示されている右の図は、次のように指定しています。

<img src="bear.png" style="transform:translate(20px,10px) skew(-0.5rad,0rad) scale(0.8,0.8);">
表示例

（２）　　3D 変形関数

3D 効果を出すには、親要素に transform-style: preserve-3d を指定し、perspective で遠近法の視点を設定する必要があります。

（２－１） translateZ

要素を Z 方向に 3D 移動します。

transform:translateZ(属性値)

要素を Z 方向に 3D 移動する。

属性値説明
Z 方向距離数値＋単位
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: translateZ(20px);">
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: translateZ(-20px);">
</div>

本来の位置（黄色の部分）から左側は Z 方向に 20px（手前に 20px）、右側は Z 方向に -20px（奥に 20px）移動しています。

表示例

Z 方向距離に負の値を指定（奥に移動）すると背景色の下に隠れて表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２－２） translate3d

要素を X 方向、Y 方向、Z 方向に 3D 移動します。

transform:translate3d(属性値,属性値,属性値)

要素を X 方向、Y 方向、Z 方向に 3D 移動する。

属性値説明
X 方向距離数値＋単位
Y 方向距離数値＋単位（規定値：0px）
Z 方向距離数値＋単位（規定値：0px）
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: translate3D(50px,10px,20px);">
</div>

本来の位置（黄色の部分）から X 方向に 50px、Y 方向に 10px、Z 方向に 20px（手前に 20px）移動しています。

表示例

（２－３） scaleZ

要素を Z 方向の中央を基準に 3D 拡大・縮小します。

transform:scaleZ(属性値)

要素を Z 方向の中央を基準に拡大・縮小する。

拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
Z 方向倍率1以上で拡大、1未満で縮小
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: scaleZ(1.4);">
</div>

画像は平面なので、Z 方向に何倍しようが画像に変化はありません（①と②）。例えば左側（①）は Z 方向に 1.4倍にしています。右側（②）はそのままです。どちらも同じ画像に見えます。

しかし、これを Y 軸を中心に回転させると、その違いが明確になります（③と④）。つまり、左側（③）は Z 軸方向（手前）に 1.4倍拡大されているのが分かります。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２－４） scale3d

X 方向、Y 方向、Z 方向へ拡大縮小します。

transform:scale3d(属性値,属性値,属性値)

要素を Z 方向に拡大・縮小する。

ただし、3D 効果を出すには、親要素に transform-style: preserve-3d を指定し、perspective で遠近法の視点を設定する必要がある。

拡大・縮小の基準を変更する場合は transform-origin で指定する。

属性値説明
X 方向倍率1以上で拡大、1未満で縮小
Y 方向倍率1以上で拡大、1未満で縮小（規定値：1）
Z 方向倍率1以上で拡大、1未満で縮小（規定値：1）
記述例
<div style="transform-style:preserve-3d;perspective:50px;">
  <img src="bear.png" style="transform: scale3d(1.5,1.2,2);">
</div>

本来の位置（黄色の部分）から X 方向に 1.5倍、Y 方向に 1.2倍、Z 方向に 2倍にしていますが、先の例と同じで Z 方向の拡縮はこのままでは分かりません。

表示例

（２－５） rotateX

要素の中央を基準にして X 軸方向に時計回りの 3D 回転を指定します。

transform:rotateX(属性値)

要素の中央を基準にして X 軸方向に時計回りの 3D 回転を指定する。

回転の基準を変更する場合は transform-origin で指定する。

属性値説明
回転角度数値＋単位
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: rotateX(60deg);">
</div>

本来の位置（黄色の部分）から X 軸を中心に時計回りに 60°回転しています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２－６） rotateY

要素の中央を基準にして Y 軸方向に時計回りの 3D 回転を指定します。

transform:rotateY(属性値)

要素の中央を基準にして Y 軸方向に時計回りの 3D 回転を指定する。

回転の基準を変更する場合は transform-origin で指定する。

属性値説明
回転角度数値＋単位
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: rotateY(60deg);">
</div>

本来の位置（黄色の部分）から Y 軸を中心に時計回りに 60°回転しています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２－７） rotateZ

要素の中央を基準にして Z 軸方向に時計回りの 3D 回転を指定します。

transform:rotateZ(属性値)

要素の中央を基準にして Z 軸方向に時計回りの 3D 回転を指定する。

回転の基準を変更する場合は transform-origin で指定する。

属性値説明
回転角度数値＋単位
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: rotateZ(60deg);">
</div>

本来の位置（黄色の部分）から Z 軸を中心に時計回りに 60°回転しています。

表示例

（２－８） rotate3d

指定した軸を中心に時計回りの 3D 回転を指定します。

transform:rotate3d(X 座標, Y 座標, Z 座標, 回転角度)

[0,0,0]から[X 座標,Y 座標,Z 座標]に向かう直線を軸に時計回りの 3D 回転を指定する。

属性値説明
X 座標数値
Y 座標数値
Z 座標数値
回転角度数値＋単位
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: rotate3d(3,1,2,60deg);">
</div>

本来の位置（黄色の部分）から [ 0, 0, 0 ] から [ 3, 1, 2 ] に向かう直線を軸とし、時計回りに 60°回転しています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２－９） matrix3d

16個の数値（4x4の行列）で 3D 変形を指定します。

transform:matrix3d(数値, 数値, 数値, ... ,数値)

16個の数値（4x4の行列）で 3D 変形を指定する。

記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform: matrix3d(2, 0.2, 0, 0, 0, 0.5, 0, 0, 0, 0, 4, 0, 10, 5, 2, 1);">
</div>

本来の位置（黄色の部分）から 3D 変形しています。

表示例

８．１．２　　中心点　(transform-origin)

transform で要素を回転させたりする場合の中心点を指定します。

transform-origin:属性値 ...

transform で要素を回転させたりする場合の中心点を指定する。

属性値が３つのときは、X軸 Y軸 Z軸

属性値が２つのときは、X軸 Y軸 0px

属性値が１つのときは、X軸 center 0px　（ただし、top、bottom のときは、center Y軸 0px）

属性値説明
X軸left左端を中心にする
center中央を中心にする（規定値）
right右端を中心にする
パーセンテージ数値%
長さ数値＋単位
Y軸top上端を中心にする
center中央を中心にする（規定値）
bottom下端を中心にする
パーセンテージ数値%
長さ数値＋単位
Z軸長さ数値＋単位（規定値:0px）
記述例
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:top;transform:rotateX(30deg);">
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:center;transform:rotateX(30deg);">
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:bottom;transform:rotateX(30deg);">
</div>

<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:left top;transform:rotateZ(30deg);">
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:center center;transform:rotateZ(30deg);">
</div>
<div style="transform-style:preserve-3d;perspective:100px;">
  <img src="bear.png" style="transform-origin:right bottom;transform:rotateZ(30deg);">
</div>

上の３つは、本来の位置（黄色の部分）から、上端、中央、下端を中心に X 軸方向に回転しています。

下の３つは、本来の位置（黄色の部分）から、左上、中央、右下を中心に Z 軸方向に回転しています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


８．１．３　　表示方法　(transform-style)

transform で 3D 変換した結果を、二次元的に表示するか、三次元的に表示するかを指定します。

transform-style:属性値

transform で 3D 変換した結果を、二次元的に表示するか、三次元的に表示するかを指定する。

属性値説明
flat二次元的に表示する（規定値）
preserve-3d三次元的に表示する
記述例
スタイルシート
  div.parent {
    background-color:yellow;
/*    opacity:0.9; */         ←  opacity を記述すると 3D にならない
    transform-origin:center center;
    transform:rotateY(45deg);
  }
  img {
    border:solid 1px gray;
    transform-origin:top left;
    transform:rotateX(45deg);
  }

ボディ
<div style="border:solid 1px chocolate;perspective:200px;">
  <div class="parent" style="transform-style:flat;">
    <img src="bear.png">
  </div>
</div>
<div style="border:solid 1px chocolate;perspective:200px;">
  <div class="parent" style="transform-style:preserve-3d;">
    <img src="bear.png">
  </div>
</div>

親要素（黄色の部分）を Y 軸を中心に回転し、さらにその子要素（熊の絵）を X 軸を中心に回転しています。

表示例

注意

preserve-3d を指定した要素に opacity 属性の記述があると、三次元的に表示されません。


８．１．４　　視点

X Z 視点 視点

遠近法では、遠くは小さく、手前は大きく表示されます。視点が近い方が、さらに遠近法による差異が大きくなります。

（１）　　視点距離　(perspective)

transform で 3D 変換を行う際の、要素の中心から視点までの距離を指定します。

perspective:属性値

transform で 3D 変換を行う際の、要素の中心から視点までの距離を指定する。

属性値説明
none遠近法による変形を適用しない（規定値）
数値要素の中心から視点までの距離
記述例
スタイルシート
  div {
    width:74px;
    height:74px;
    background-color:yellow;
    opacity:0.8;
    transform-style:preserve-3d;
  }
  img {
    border:solid 1px gray;
  }

ボディ
<div style="perspective:100px;">
  <img src="bear.png" style="transform:rotateY(60deg);">
</div>
<div style="perspective:200px;">
  <img src="bear.png" style="transform:rotateY(60deg);">
</div>

Z 軸方向の視点を変えて、Y 軸を中心に回転しています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


（２）　　視点基点　(perspective-origin)

perspective での遠近投影の基点となる位置を指定します。

perspective-origin:属性値 ...

perspective での遠近投影の基点となる位置を指定する。

属性値説明
left左端を基点にする
center中央を基点にする（規定値）
right右端を基点にする
top上端を中基点にする
bottom下端を基点にする
パーセンテージ要素の左上隅からの距離を、要素の幅または高さに対する割合で指定する。負の値も指定可能
長さ数値＋単位
記述例
スタイルシート
  div {
    width:74px;
    height:74px;
    background-color:yellow;
    opacity:0.8;
    transform-style:preserve-3d;
    perspective:100px;
  }
  img {
    border:solid 1px gray;
    transform:rotateY(90deg);
  }

ボディ
<div style="perspective-origin:left center;">
  <img src="bear.png">
</div>
<div style="perspective-origin:right center;">
  <img src="bear.png">
</div>

Y 軸方向を中心に 90°回転した要素を視点を変えて見ています。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。


８．１．５　　背面の表示　(backface-visibility)

要素の背面の表示/非表示を指定します。

backface-visibility:属性値

要素の背面の表示/非表示を指定する。

属性値説明
visible背面を表示する（規定値）
hidden要素を表示しない
記述例
スタイルシート
  div.parent {
    background-color:yellow;
    opacity:0.8;
    transform-style:preserve-3d;
    perspective:100px;
  }
  img {
    border:solid 1px gray;
    transform:rotateY(120deg);
  }

ボディ
<div>
  <img src="bear.png" style="backface-visibility:visible;">
</div>
<div>
  <img src="bear.png" style="backface-visibility:hidden;">
</div>

Y 軸方向を中心に　120°回転しているので、画像が裏側を向いている状態になっています。左側は visible なので表示されていますが、右側は hidden なので表示されていません。

表示例

元の平面の奥にある画像は表示されなくなります。上の図は背景色の黄色を少し透明にしているので見えています。





参考：3D 変換
再実行


８．２　　クリッピング

クリッピングについて説明します。

クリッピングを行う際には、クリッピングパスとクリッピング領域という２つの概念が重要となります。クリッピングパスは、要素を切り取る形を現すパス（基本的なシェイプや複雑な多角形）で、クリッピング領域を区切り取るものです。clip-path 属性で定義します。クリッピング領域は、クリッピングパス内の範囲をすべて含む領域のことです。

基本的な図形である rect や circle、画像を表示する image 要素などに clip-path 属性でクリッピングパスを指定することでクリッピングを実現します。

ようするにクリッピングパスとクリッピング領域とが重なる部分のみが表示されます。

８．２．１ クリッピング　(clip-path)

クリッピングパスを指定します。clip-path 属性で要素をクリッピングすると、指定したクリッピングパスの外側が非表示となって内側だけが表示されます。

clip-path 属性で指定するクリッピングパスの形状には、長方形、円、楕円、多角形の基本図形や SVG の clipPath 要素の URL を指定することもできます。

clip-path:基本図形 [ジオメトリボックス]

ジオメトリボックスを基準として基本図形でクリッピングする。

座標や半径などの長さには数値に em や ex や px などの単位をつけて絶対的な位置や長さを指定することもできますし、数値に % を付けて相対的な位置や長さを指定することができます。

基本図形
基本図形説明
noneクリッピングしない（規定値）
polygon([塗りつぶし]
　　　　頂点座標, 頂点座標, ... ,頂点座標)		多角形
塗りつぶしnonzero 全面塗りつぶし（規定値）
evenodd 塗りわけ
頂点座標X座標 Y座標（空白区切り）
inset(長さ round 角丸半径)内側へのオフセット（通常は長方形となる）
長さ画像の端からの距離（注１）
角丸半径角を丸くするときの半径（注２）
circle(半径 at 中心点)円
半径半径の長さ（注３）
% で記述した場合はジオメトリボックスと対角線を同じくする正方形の１辺に対する割合
中心点X座標 Y座標（空白区切り）
ellipse(横半径 縦半径 at 中心点)楕円
横半径列方向の半径の長さ
縦半径行方向の半径の長さ
中心点X座標 Y座標（空白区切り）
ジオメトリボックス
ジオメトリボックス説明
margin-boxマージンを含めた長方形を指定
border-boxボーダーを含めた長方形を指定（規定値）
padding-boxパディングを含めた長方形を指定
content-boxパディングの内側のコンテント領域の長方形を指定
（注１）
１つ指定４辺とも同じ距離
２つ指定上下、左右　の距離
３つ指定上、左右、下　の距離
４つ指定上、右、下、左　の距離
 （注２）
１つ指定４つの角とも同じ
２つ指定左上、右下 と 右上、左下
４つ指定左上、右上、右下、左下
X/Y とすると水平/垂直方向の半径
（注３）
基準となる長さ
width = ジオメトリボックスの幅
height = ジオメトリボックスの高さ
(width)2 + (height)2 2

（１）基本図形

下の例では、灰色の部分がボーダー、緑の部分がパディング、黄色の背景のクマの絵がコンテンツです。

記述例
スタイルシート
img {
  border: solid 6px lightgrey;
  padding: 10px;
  background-color: lime;
}

ボディ
<img src="bear.png" style="clip-path:none;">
<img src="bear.png" style="clip-path:polygon(38px 0px, 14px 72px, 76px 28px, 0px 28px, 62px 72px);">
<img src="bear.png" style="clip-path:inset(20px 10px round 20px/10px);">
<img src="bear.png" style="clip-path:circle(30px at 30px 30px);">
<img src="bear.png" style="clip-path:ellipse(20px 47px at 40px 47px);">

下の段がクリッピングされた図形です。

上の段はどのようにクリッピングされたかを示すために別途表示しています。

表示例

h1 や div などのように長さが決まっていない要素の場合には、px などの長さの単位以外に % を使用して割合を指定することもできます。

もちろん、img 要素にも % を使用することができます。

記述例
スタイルシート
h2.title {
  padding: 5px;
  background-color: green;
  color: white;
}
div.balloon {
  width:150px;
  padding: 5px;
  background-color: blue;
  color: white;
}

ボディ
<h2 title="見出し" class="title" style="clip-path:polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%, 0% 0%);">
     h2 要素をクリッピング　　<br>しています。</h2>
<div title="吹き出し" class="balloon"
     style="clip-path:polygon(0% 0%, 100% 0%, 100% 90%, 50% 90%, 30% 100%, 40% 90%, 0% 90%);">
     div 要素をクリッピングすることによって吹き出しのようにすることもできます。<br><br></div>
<img title="circle" src="bear.png" style="clip-path:circle(30% at 60% 40%);">
表示例

クリッピングは img 要素だけではなく、div や video 要素などにも使用できます。

また、アニメーションも指定することもできます。

記述例
スタイルシート
div.hexagon {
  width:100px;
  padding: 15px;
}
@keyframes hexagon {
  from {
    transition-function:ease-out;
    clip-path:polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
    background-color: yellow;
    color: black;
  }
  50% {
    transition-function:ease-in;
    clip-path:polygon(85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%, 50% 0%);
    background-color: lime;
    color: white;
  }
  to {
    transition-function:ease-out;
    clip-path:polygon(85% 75%, 50% 100%, 15% 75%, 15% 25%, 50% 0%, 85% 25%);
    background-color: yellow;
    color: black;
  }
}

ボディ
<video controls src="video/criticalCat.mp4" width="200" height="110"
     style="clip-path:ellipse(100px 50px at 100px 50px)"></video>
<div title="アニメーション" class="hexagon"
     style="animation-name:hexagon;animation-iteration-count:infinite;animation-duration:5s;">
     div 要素をアニメーションさせています。</div>
表示例

（２）ジオメトリボックス

基本図形と共に指定された場合、ジオメトリボックスはクリッピングの基準となります。

基本図形が指定されず、ジオメトリボックスだけの場合は、ジオメトリボックスの辺に沿ってクリッピングされます。

なお、下の例では、灰色の点線の矩形がマージンで、灰色の部分がボーダー、緑の部分がパディング、黄色の背景のクマの絵がコンテンツです。

記述例
<img src="bear.png" style="clip-path:margin-box circle(30% at 60% 40%);">
<img src="bear.png" style="clip-path:border-box circle(30% at 60% 40%);">
<img src="bear.png" style="clip-path:padding-box circle(30% at 60% 40%);">
<img src="bear.png" style="clip-path:content-box circle(30% at 60% 40%);">

下の段がクリッピングされた図形です。

上の段はどのようにクリッピングされたかを示すために別途表示しています。オレンジ色の矩形がジオメトリボックスです。また、ジオメトリボックスの外側を薄く表示しています。

そして、オレンジ色の円がクリッピングされる範囲です。%（割合）を指定したとき、このジオメトリボックスが基準になります。

表示例

clip-path:url(#ID)

ID で示された SVG の clipPath 要素の範囲でクリッピングする。


SVG の clipPath 要素でクリッピングします。

なお、SVG 要素は表示するわけではないので、width や height は 0 にします。

記述例
<svg width="0" height="0">
 <clipPath id="clip1">
  <polygon points="40,0 16,72 78,28 2,28 64,72"/>
 </clipPath>
 <clipPath id="clip2">
  <circle cx="61" cy="43">
   <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/>
  </circle>
 </clipPath>
</svg>

<img src="bear.png" style="clip-path:url(#clip1);">
<img src="bear.png" style="clip-path:url(#clip2);">
表示例

８．３　　マスキング

マスキングとは、表示されている要素の一部または全部のを隠すための方法です。

マスキングでは、マスクとマスキング領域という２つの概念が重要となります。

マスクは、要素を切り取る形を現す図形やグラデーション、画像などで、マスキング領域を区切り取るものです。

マスキング領域は、マスク内の範囲をすべて含む領域のことです。

マスキングの結果としては、マスクとマスキング領域とが重なる部分のみが表示されます。ただし、マスクの透明度や輝度によって濃淡の差をつけることができます。


８．３．１ マスク・イメージ　(mask-image)

mask-image 属性でマスキング領域（図形、画像あるいはグラデーション）を指定します。

mask-image: 属性値[, 属性値, ...]

画像やグラデーションでマスキングするために、マスクを指定する。

属性値説明
noneマスキングしない
グラデーショングラデーションの色、濃淡などでマスキングする
線形グラデーションlinear-gradient(角度, 開始色, 途中色, ... ,終了色)
repeating-linear-gradient(角度, 開始色, 途中色, ... ,終了色)
円形グラデーションradial-gradient(形状|大きさ at 位置, 開始色, 途中色, ... ,終了色)
repeating-radial-gradient(形状|大きさ at 位置, 開始色, 途中色, ... ,終了色)
円錐グラデーションconic-gradient(開始, 途中, ... ,終了)
repeating-conic-gradient(開始, 途中, ... ,終了)
URL画像の URL　url(URL)


規定値としてマスクとして、使用する値は透明度です。以下の例でも透明度によってマスキングが行われています。

記述例
<img src="bear.png" style="mask-image:linear-gradient(white, transparent 80%);">
<img src="bear.png" style="mask-image:radial-gradient(white, transparent 60%);">
<img src="bear.png" style="mask-image:repeating-conic-gradient(white, transparent 33.3%);">
<img src="bear.png" style="mask-image:url(circle.png);">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


SVG の mask 要素の ID を指定することもできます。

記述例
<svg width="0" height="0">
 <mask id="mask1">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#777777"/>
 </mask>
</svg>

<img src="bear.png" style="mask-image:url(#mask1);">
<img src="bear.png" style="mask-image:url(mask.svg);">
<svg>
mask.svg
<svg viewbox="0,0,74,74" width="74" height="74">
 <mask id="mask1">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#777777"/>
 </mask>
</svg>
表示例


８．３．２ マスク・モード　(mask-mode)

mask-mode 属性で、輝度（luminance）あるいは、透明度（alpha）のいずれをマスク値として使用するのかということを指定します。

輝度とは明るさのことですが、光の三原色のR（赤）G（緑）B（青）のうち、人間の目で見た際に明るく感じるG（緑）やR（赤）の重みづけを大きくし、暗く感じるB（青）の重みづけを小さくしたうえで算出されます。 そのため、黄系（R+G）の色は輝度が高く、青系（B）の色は輝度が低くなります。

mask-mode: 属性値[, 属性値, ...]

輝度（luminance）あるいは、透明度（alpha）のいずれをマスクとして使用するのかということを指定する。

属性値説明
alpha透明度をマスク値とする
luminance輝度をマスク値とする
match-sourcemask-image での指定が（規定値）
SVG のとき輝度
画像やグラデーションのとき透明度

左側は透明度によって、中央は輝度によって、右側はこの例ではマスクが画像なので透明度によってマスクされます。

ただし、ほとんどのブラウザは何を指定しても透明度によってマスクしているようです。

記述例
<img src="bear.png" style="mask-mode:alpha;mask-image:radial-gradient(white, transparent 80%);">
<img src="bear.png" style="mask-mode:luminance;mask-image:radial-gradient(white, transparent 80%);">
<img src="bear.png" style="mask-mode:match-source;mask-image:radial-gradient(white, transparent 80%);">
<br>
<img src="bear.png" style="mask-mode:alpha;mask-image:radial-gradient(white, black 80%);">
<img src="bear.png" style="mask-mode:luminance;mask-image:radial-gradient(white, black 80%);">
<img src="bear.png" style="mask-mode:match-source;mask-image:radial-gradient(white, black 80%);">

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．３ マスクの繰り返し　(mask-repeat)

mask-repeat 属性で、マスクの繰り返しを指定します。

mask-repeat: 属性値[, 属性値]

繰り返し方法を指定する。

属性値 を１つだけ指定した場合は列方向と行方向の繰り返し方法で、２つ指定した場合は１つ目が列方向２つ目が行方向の繰り返し方法となる。

属性値説明
repeat-x列方向にのみ繰り返す
repeat-y行方向にのみ繰り返す
repeat列方向と行方向に繰り返す（規定値）
space繰り返しの最初と最後のイメージが領域の端に接するようにスペースを空けて配置される
roundイメージのサイズが調整されて隙間なく繰り返し配置される
no-repeat一度だけ配置されて、繰り返さない

上段左側は列方向への繰り返し、上段中央は行方向への繰り返し、上段右側は両方向への繰り返しとなります。

下段左側はマスク・イメージの大きさは変えずに、隙間を作ってマスキングの領域に均等に配置しています。

下段中央はマスキングの領域に隙間なく配置できるように、マスク・イメージの大きさをちょうどよい大きさに変えて配置しています。

下段右側は繰り返しません。

記述例
スタイルシート
img {
  mask-image:url(dia.png);
}
ボディ
<img src="bear.png" style="mask-repeat:repeat-x;">
<img src="bear.png" style="mask-repeat:repeat-y;">
<img src="bear.png" style="mask-repeat:repeat;">
<br>
<img src="bear.png" style="mask-repeat:space;">
<img src="bear.png" style="mask-repeat:round;">
<img src="bear.png" style="mask-repeat:no-repeat;">
dia.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．４ マスクの開始位置　(mask-position)

mask-position 属性で、マスクの開始位置を指定します。マスクを繰り返す場合もこの基準位置から繰り返されます。

mask-position: 属性値[, 属性値]

マスキングする際の開始位置を指定する。mask-repeat を指定したときもこの開始位置から繰り返される。

列方向位置、行方向位置の順で指定する。省略すると列方向、行方向共に center を指定したことになる。

列方向位置は、left か right と パーセント（%）か 数値（単位）を組み合わせて指定する。left も right も記述しないと left になり、パーセント（%）も 数値（単位）も指定しないと 0px の意味になる。

行方向位置は、top と bottom で同様に指定する。

属性値説明
center中央に表示する（横、縦 ともに 50% と指定したのと同じ）（規定値）
left左側に表示する
right右側に表示する
top上部に表示する
bottom下部に表示する
パーセント（%）その要素の表示領域に対する割合を % で指定
数値（単位）その要素の数値に em や ex や px などの単位をつけて指定

左側は right top なので右上に配置されます。

中央は px や % などの数値が指定されていますので、右上から指定した位置に配置されます。

右側は center を１つだけ指定していますので、列方向、行方向ともに中央に配置されます。

記述例
スタイルシート
img {
  mask-image:url(circle.png);
  mask-repeat:no-repeat;
}
ボディ
<img src="bear.png" style="mask-position:right top;">
<img src="bear.png" style="mask-position:right 10px top 80%;">
<img src="bear.png" style="mask-position:center;">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．５ マスクの範囲　(mask-clip)

mask-clip 属性で、マスキングの範囲を指定します。

mask-clip: 属性値

マスキングの範囲を指定する。

属性値説明
border-boxボーダーを含む内側の部分を範囲とする（規定値）
padding-boxパディング（ボーダーの内側）を含む内側の部分を範囲とする
content-boxコンテンツ（パディングの内側）を含む内側の部分を範囲とする

左側は border-box を指定していますので、マスキングの範囲はボーダーを含む内側の部分となります。

中央は padding-box を指定していますので、マスキングの範囲はパディングを含む内側となります。

右側は content-box を指定していますので、マスキングの範囲はコンテンツ（画像）を含む内側となります。

記述例
スタイルシート
img {
  mask-image:url(circle.png);
  mask-repeat:round;
}
ボディ
<img src="bear.png" style="mask-clip:border-box;">
<img src="bear.png" style="mask-clip:padding-box;">
<img src="bear.png" style="mask-clip:content-box;">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．６ マスクの基準位置　(mask-origin)

mask-origin 属性で、マスキングの基準位置を指定します。

mask-origin: 属性値

マスキングの基準位置を指定する。

属性値説明
border-boxボーダーの左上を基準位置とする（規定値）
padding-boxパディングの外側(ボーダーの内側)の左上を基準位置とする
content-boxコンテンツの外側(パディングの内側)の左上を基準位置とする

左側は border-box を指定していますので、マスク・イメージはボーダーを含む内側の部分が開始位置となります。

中央は padding-box を指定していますので、マスク・イメージはパディングを含む内側の部分が開始位置となります。

右側は content-box を指定していますので、マスク・イメージはコンテンツ（画像）を含む内側の部分が開始位置となります。

記述例
スタイルシート
img {
  mask-image:url(circle.png);
  mask-repeat:round;
}
ボディ
<img src="bear.png" style="mask-origin:border-box;">
<img src="bear.png" style="mask-origin:padding-box;">
<img src="bear.png" style="mask-origin:content-box;">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．７ マスクのサイズ　(mask-size)

mask-size 属性で、マスクのサイズを指定します。

mask-size: 属性値

マスクのサイズを指定する。

属性値説明
auto自動的に算出される（規定値）
contain縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
パーセント（%）その要素の表示領域に対する、列方向、行方向の割合を % で指定（1つしか記述しないと列方向の割合で決まる大きさで行方向も）
数値（単位）その要素の数値に em や ex や px などの単位をつけて、列方向、行方向を指定（1つしか記述しなければ横縦同じ大きさ）


上段左側は auto を指定していますので、マスク・イメージはそのままの大きさとなります。

上段中央は contain を指定していますので、マスク・イメージは縦横比が変わらない全体が収まる最大サイズとなります。

上段右側は cover を指定していますので、マスク・イメージは縦横比が変わらないマスク領域を完全に覆う最小サイズとなります。

下段はサイズや割合を指定していますので、マスク・イメージは指定したサイズや割合で決まるサイズとなります。

記述例
スタイルシート
img {
  mask-image:url(circle.png);
}
ボディ
<img src="bear.png" style="mask-size:auto;">
<img src="bear.png" style="mask-size:contain;">
<img src="bear.png" style="mask-size:cover;">
<br>
<img src="bear.png" style="mask-size:25% 50%;">
<img src="bear.png" style="mask-size:20px 10px;">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．８ マスクの合成　(mask-composite)

mask-composite 属性で、複数マスクの合成方法を指定します。

mask-composite: 属性値

複数マスクの合成方法を指定する。

mask-image 属性に複数のマスクを指定することができます。そのときのマスクの重なり具合を指定します。

なお、先に記述したマスクが上層、後に記述したマスクが下層となります。

属性値説明
add結合 … 上層マスクを下層マスクの上に重ねて合体し、すべてがマスクとなる（規定値）
subtract型抜き … 上層マスクを下層マスクで型抜きし残った部分がマスクとなる
　　　　　　　（３つ以上記述した場合は右２つの結果で左を型抜きし、その結果でさらに左を型抜きする ...を繰り返す）
intersect交差 … 上層マスクと下層マスクが重なった部分だけがマスクとなる
exclude除外 … 上層マスクと下層マスクが重ならない部分がマスクとなる


マスク・イメージを複数指定したときの合成方法を指定していますが、ほとんどのブラウザは add（結合）しかできないようです。

記述例
スタイルシート
img {
  mask-image:url(square.png),url(circle.png);
  mask-repeat:no-repeat;
}
ボディ
<img src="bear.png" style="mask-composite:add;">
<img src="bear.png" style="mask-composite:subtract;">
<img src="bear.png" style="mask-composite:intersect;">
<img src="bear.png" style="mask-composite:exclude;">
circle.png　　square.png
　　　
白い部分は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．３．９ マスク　(mask)

mask 属性は、 mask-image、mask-mode、mask-repeat、mask-position、mask-origin、mask-clip、mask-size、mask-composite の値を一度に指定します。

mask: 属性値

マスキングの複数のプロパティの値をまとめて指定する。

指定する順番は構わないが、mask-size 属性値は必ず mask-position 属性値の後に、「/」で区切って指定する必要がある。

なお、同じ属性値を持つ mask-origin と mask-clip は、この順で指定するようです。１つしか指定しない場合は mask-origin と mask-clip とも同じ値になります。

属性名初期値
mask-imagenone
mask-modematch-source
mask-positioncenter
mask-originborder-box
mask-clipborder-box
mask-sizeauto
mask-compositeadd


左側は border-box padding-box の順に指定していますので、mask-origin:border-box mask-clip:padding-box となります。

中央は padding-box border-box の順に指定していますので、mask-origin:padding-box mask-clip:border-box となります。

右側は padding-box を１つだけ指定していますので、mask-origin:padding-box mask-clip:padding-box となります。

記述例
<img src="bear.png" style="mask:border-box padding-box top left/20% 25% url(circle.png);">
<img src="bear.png" style="mask:padding-box border-box top left/20% 25% url(circle.png);">
<img src="bear.png" style="mask:padding-box top left/20% 25% url(circle.png);">
circle.png

白い部分
は透明

灰色の部分がボーダーで、緑の部分がパディング、黄色の部分が画像の背景（コンテンツ部分）です。

表示例


８．４　　フィルター

フィルターについて説明します。

filter:属性値

フィルター関数を指定する。

属性値説明
noneフィルターを使用しない（規定値）
フィルター関数
blurぼかし
brightness明るさ
contrastコントラスト
drop-shadow影
grayscaleグレースケール
hue-rotate色相
invert階調
opacity不透明度
saturate彩度
sepiaセピア
urlSVG で記述したフィルター

８．４．１ ぼかし　(blur)

ぼかし効果を与えます。値を大きくすればするほどぼかし効果が大きくなります。

filter:blur(数値)

ぼかし効果を与える。

属性値説明
数値長さ（数値＋単位）

値が大きくなるほどぼかし効果が大きくなります。

記述例
<img src="bear.png" style="filter:blur(0px);">
<img src="bear.png" style="filter:blur(1px);">
<img src="bear.png" style="filter:blur(5px);">
<img src="bear.png" style="filter:blur(10px);">
表示例

８．４．２ 明るさ　(brightness)

画像を明るくまたは暗くします。

100% 未満の値では画像が暗くなり、100% を超える値では画像が明るくなります。0% の値では画像が完全に黒くなり、100% の値では変更されないままになります。

filter:brightness(割合)

画像を明るくまたは暗くする。

属性値説明
数値明るさの割合0～1：暗くなる、1～：明るくなる
パーセント0%～100%：暗くなる、100%～：明るくなる

値が大きくなるほど明るくなります。0 の値では画像が完全に黒くなります。

記述例
<img src="bear.png" style="filter:brightness(0);">
<img src="bear.png" style="filter:brightness(50%);">
<img src="bear.png" style="filter:brightness(1);">
<img src="bear.png" style="filter:brightness(200%);">
<img src="bear.png" style="filter:brightness(5);">
表示例

８．４．３ コントラスト　(contrast)

コントラストを調整します。

100% 未満の値では画像の明るい部分と暗い部分の差が小さくなり、100% を超える値ではその差が大きくなります。0% の値ではグレー1色になり、100% の値では変更されないままになります。

filter:contrast(割合)

コントラストを調整する。

属性値説明
数値コントラストの割合0～1：コントラストが下がる、1～：コントラストが上がる
パーセント0%～100%：コントラストが下がる、100%～：コントラストが上がる

値が大きくなるほどコントラストが強くなります。0 の値では画像がグレー1色になります。

記述例
<img src="bear.png" style="filter:contrast(0);">
<img src="bear.png" style="filter:contrast(50%);">
<img src="bear.png" style="filter:contrast(1);">
<img src="bear.png" style="filter:contrast(200%);">
<img src="bear.png" style="filter:contrast(5);">
表示例

８．４．４ 影　(drop-shadow)

影の位置や影が広がる半径を変えます。

filter:drop-shadow(X位置 Y位置[ ぼかし半径[ 影の色]])

影の位置や影が広がる半径を変える。

属性値説明
X位置影の水平方向の距離
Y位置影の垂直方向の距離
ぼかし半径影をぼかす半径（値が大きくなるほど、影は広く薄くなる）（規定値：0）
影の色影の色を指定します。（規定値：ブラウザーによる）

影の位置は元の画像からのオフセット距離を指定します。負の値を指定すると上や左、正の値では下や右への移動になります。

影をぼかす半径は、値が小さいほどくっきりし、大きくなるほどぼやけていきます。

記述例
<img src="bear.png" style="filter:drop-shadow(-5px -10px 5px blue);">
<img src="bear.png" style="filter:drop-shadow(-5px -5px);">
<img src="bear.png" style="filter:drop-shadow(0 0);">
<img src="bear.png" style="filter:drop-shadow(10px 3px 2px green);">
<img src="bear.png" style="filter:drop-shadow(0px 0px 20px red);">
表示例

８．４．５ グレースケール　(grayscale)

グレースケールに変換します。

filter:grayscale(割合)

グレースケールに変換する。

属性値説明
数値グレースケールの効果の割合
値を大きくすればするほど、グレーに変化する		0～1
パーセント0%～100%

影の位置は元の画像からのオフセット距離を指定します。負の値を指定すると上や左、正の値では下や右への移動になります。

影をぼかす半径は、値が小さいほどくっきりし、大きくなるほどぼやけていきます。

記述例
<img src="bear.png" style="filter:grayscale(0);">
<img src="bear.png" style="filter:grayscale(25%);">
<img src="bear.png" style="filter:grayscale(0.5);">
<img src="bear.png" style="filter:grayscale(75%);">
<img src="bear.png" style="filter:grayscale(1);">
表示例

８．４．６ 色相の回転　(hue-rotate)

画像のすべての色に色相の回転を適用します。

filter:hue-rotate(角度)

グレースケールに変換する。

属性値説明
角度色相の回転角度（数値＋単位）

正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。最小値または最大値はなく、hue-rotate(Ndeg) は N を 360 で割った余りと同じ意味になります。

記述例
<img src="bear.png" style="filter:hue-rotate(0deg);">
<img src="bear.png" style="filter:hue-rotate(90deg);">
<img src="bear.png" style="filter:hue-rotate(0.5turn);">
<img src="bear.png" style="filter:hue-rotate(270deg);">
<img src="bear.png" style="filter:hue-rotate(1turn);">
表示例

８．４．７ 色の階調の反転　(invert)

画像のすべての色（色相・明度・彩度）を反転します。

filter:invert(割合)

画像のすべての色（色相・明度・彩度）を反転する。

属性値説明
数値変換の度合い
100% の値で完全に反転される		0～1
パーセント0%～100%

0%で元画像のままで、100%で完全に反転します。

記述例
<img src="bear.png" style="filter:invert(0);">
<img src="bear.png" style="filter:invert(25%);">
<img src="bear.png" style="filter:invert(0.5);">
<img src="bear.png" style="filter:invert(75%);">
<img src="bear.png" style="filter:invert(1);">
表示例

８．４．８ 不透明度　(opacity)

不透明度を設定します。

filter:opacity(割合)

画像の不透明度を設定する。

属性値説明
数値不透明の度合い
100% の値で完全に不透明になる		0～1
パーセント0%～100%

0%は完全に透明で表示されません。100%で完全に不透明です。

記述例
<img src="bear.png" style="filter:opacity(0);">
<img src="bear.png" style="filter:opacity(25%);">
<img src="bear.png" style="filter:opacity(0.5);">
<img src="bear.png" style="filter:opacity(75%);">
<img src="bear.png" style="filter:opacity(1);">
表示例

８．４．９ 彩度　(saturate)

彩度を調整します。

100% 未満の値では彩度が小さくなり、100% を超える値では彩度が大きくなります。0% の値では彩度が全くなくなり、100% の値では変更されないままになります。

filter:saturate(割合)

彩度を調整する。

属性値説明
数値彩度の割合0～1：彩度が下がる、1～：彩度が上がる
パーセント0%～100%：彩度が下がる、100%～：彩度が上がる

値が大きくなるほど彩度が上がります。0 の値では彩度が全くなくなります。

記述例
<img src="bear.png" style="filter:saturate(0);">
<img src="bear.png" style="filter:saturate(50%);">
<img src="bear.png" style="filter:saturate(1);">
<img src="bear.png" style="filter:saturate(200%);">
<img src="bear.png" style="filter:saturate(5);">
表示例

８．４．１０ セピア色　(sepia)

セピア色の変化を調整します。

100% 未満の値では彩度が小さくなり、100% を超える値では彩度が大きくなります。0% の値では彩度が全くなく、100% の値では変更されないままになります。

filter:sepia(割合)

セピア色の変化を調整する。

属性値説明
数値セピア色の度合い
100% の値で完全にセピア色になる		0～1
パーセント0%～100%

値が大きくなるほどセピア色になります。100% の値では画像が完全にセピア色になります。

記述例
<img src="bear.png" style="filter:sepia(0);">
<img src="bear.png" style="filter:sepia(25%);">
<img src="bear.png" style="filter:sepia(0.5);">
<img src="bear.png" style="filter:sepia(75%);">
<img src="bear.png" style="filter:sepia(1);">
表示例

８．４．１１ URL　(url)

SVG で記述したフィルターの URL を指定します。

filter:url(URL)

SVG で記述したフィルターの URL を指定する。

属性値説明
URLSVG で記述したフィルターの URL

SVG のフィルターを参照して使用しています。

記述例
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
  </filter>
  <filter id="svgSaturate" x="-5%" y="-5%" width="110%" height="110%">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <filter id="svgTurbulence" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="3" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<img src="bear.png" style="filter:url(#svgBlur);">
<img src="bear.png" style="filter:url(#svgSaturate);">
<img src="bear.png" style="filter:url(#svgTurbulence);">
表示例