コーディングによるビジュアル加工


## CSSフィルタ
画像以外にも有効です。
SVGにも有効です。(直書きもimgタグも、背景画像にも、objectで読み込んでも)
※複数適用はカンマ無しの半角スペース

|フィルタ名|範囲|初期値|効果|
|---|---|---|---|
|blur|0px～|0px|ぼかし効果|
|grayscale|0%～100%|0%|モノクロ効果|
|sepia|0%～100%|0%|セピア効果|
|saturate|0%～|100%|彩度変更|
|hue-rotate|0deg～360deg|0deg|色相回転|
|invert|0%～100%|0%|階調反転|
|opacity|0%～100%|100%|不透明度変更|
|brightness|0%～|100%|明度変更|
|contrast|0%～|100%|コントラスト変更|
|drop-shadow|CSS3のdrop-shadowと同様|-|影効果|
|url()|-|-|指定したSVGフィルター適用|

### Brightness
0％にすると黒、100％でオリジナルと同じ明度です。
100％以上の値を指定すると、画像を明るくできます。

```:css
img {
  filter: brightness(300%);
}
```


### Hue-rotate
0deg/360degでオリジナルと同じです。
180degで色が反転します。

```:css
img {
  filter: hue-rotate(90deg);
}
```



### Saturate
0％にすると彩度がなくなり、100％でオリジナルと同じになります。
100％以上の値を指定すると、画像を鮮やかにできます。

```:css
img {
  filter: saturate(0%);
}
 
img { 
　filter: saturate(1000%); 
}
```

### Invert
0％でオリジナル画像が表示され、100％で完全に反転します。
値を50%にすると、灰色1色になります。

```:css
img {
  filter: invert(100%);
}
```

### Contrast
値を0％にすると灰色1色になります。
100％でオリジナルの画像と同じになります。

```:css
img {
  filter: contrast(50%);
}
```


### Grayscale
モノクロ写真を再現
0％でオリジナル画像が表示され、100％で完全にグレーになります。
sturate(0%)はgrayscale(100%)と同じです。

```:css
img {
  filter: grayscale(100%);
}
```

### Sepia
0％でオリジナル画像が表示され、100％で完全にセピアになります。

```:css
img {
  filter: sepia(100%);
}
```


### Blur
0pxでオリジナル画像が表示され、値が大きくなるほどぼかしの度合いが強くなります。

```
img {
  filter: blur(5px);
}
```

### Opacity
100％で完全に不透明、0％で完全に透明です。
(opacityプロパティと同じ)

```:css
img {
  filter: opacity(75%);
}
```

### Drop Shadow
影

|shadowの種類|内容|
|---|---|
|box-shadow|要素全体|
|filter: drop-shadow|画像内の透明部分|

```:css
img {
  /* filter: drop-shadow(水平方向 垂直方向 影の広がり 色の指定); */
  filter: drop-shadow(5px 5px 10px #666);
}
```

### url()メソッド
独自に作成したSVGフィルターを適用することができます。
そのデータのidを指定します。

```:css
filter: url(#id);
```

### フィルタの重ねがけ
CSSフィルタは複数利用することができます。
適用したいフィルターを続けて入力するだけで重ねがけ可能です。
モノクロでぼかされた画像なども作成できます。

```:css
img { 
  filter: contrast(175%) brightness(3%);
}
``` 

### ジェネレータ
[CSSFilterGenerator.com](http://www.cssfiltergenerator.com/)















## SVGフィルタ
SVGにはCSSより多くのフィルタ効果があり、CSSより複雑な効果が使えます。
効果をかける対象はSVG要素に限らず、DOM要素ならなんでも効果の対象にできます。

### divにフィルタをかける場合

```:html
 <svg class="svgfilter">
   <defs>
     <filter id="GaussianBlur" width="200%" height="200%" filterUnits="userSpaceOnUse">
       <feGaussianBlur stdDeviation="10" />
     </filter>
   </defs>
 </svg>
 
 <div class="filter"><img src="image1.jpg" alt=""></div>
```

```:css
.svgfilter {
  width: 0;
  height: 0;
}
 
.filter {
  filter: url(#GaussianBlur);
}
```

### filter要素のfilterUnits属性
x、y、width、height の座標系を定義します。

|値|内容|
|---|---|
|objectBoundingBox(デフォルト)|filter要素を使用している要素の比率で設定|
|userSpaceOnUse|filter要素を使用している要素に対する座標が基準|


### SVGにフィルタをかける場合

```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" >
 
  <filter id="mergeTest" x="-100" y="-100" width="500" height="500">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  </filter>
 
  <rect x="50" y="50" width="200" height="200" style="stroke: #333333; fill: #2980b9; filter: url(#mergeTest);" />
</svg>   
```



### SVGフィルターの種類

|フィルタ名|特別な属性|
|---|---|
|feBlend|in,in2,mode|
|feColorMatrix|in,type,values|
|feComponentTransfer|in|
|feComposite|in,in2,operator,k1,k2,k3,k4|
|feConvolveMatrix|in,order,kernelMatrix,divisor,bias,targetX,targetY,edgeMode,kernelUnitLength,preserveAlpha|
|feDiffuseLighting|in,surfaceScale,diffuseConstant,kernelUnitLength|
|feDisplacementMap|in,in2,scale,xChannelSelector,yChannelSelector|
|feDropShadow|dx,dy,stdDeviation|
|feFlood|flood-color,flood-opacity|
|feGaussianBlur|in,stdDeviation,edgeMode|
|feImage|preserveAspectRatio,xlink:href|
|feMorphology|in,operator,radius|
|feOffset|in,dx,dy|
|feSpecularLighting|in,surfaceScale,specularConstant,specularExponent,kernelUnitLength|
|feTile|in|
|feTurbulence|baseFrequency,numOctaves,seed,stitchTiles,type|


### feMerge
複数フィルタ
子要素として記述したfeMergeNodeタグのin属性で指定された出力画像を、上から順番に重ねます。
描画結果では、先に書いたfeMergeNodeタグの画像が奥になります。

```:svg
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" >
 
  <filter id="mergeTest" x="-100" y="-100" width="500" height="500">
 
    <feOffset in="SourceGraphic" dx="100" dy="100" result="move"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
 
    <feMerge>
      <feMergeNode in="blur" />
      <feMergeNode in="move" />
    </feMerge>
 
  </filter>
 
  <rect x="50" y="50" width="200" height="200" style="stroke: #333333; fill: #2980b9; filter: url(#mergeTest);" />
</svg>
```

この場合、SourceGraphicはrect要素で、「ぼかし」と「移動」したものが出力されます。

|属性|内容|
|---|---|
|dx|要素またはそのコンテンツの位置のX軸に沿った移動|
|dy|要素またはそのコンテンツの位置のX軸に沿った移動|
|(feColorMatrix要素の)type|translate/scale/rotate/skewX/skewY|
|(feTurbulence要素の)type|fractalNoise/turbulence|



### in属性,in2属性
フィルタの入力元を指定する属性で、result属性で定義した名前か以下のいずれかになる

|値|内容|
|---|---|
|SourceGraphic|フィルタを適用する図形の画像|
|SourceAlpha|アルファチャンネルのみのSourceGraphic(カラーチャンネルはすべて黒になる)|
|BackgroundImage|フィルタの効果範囲の背景(適用対象の図形よりも後ろの画像)|
|BackgroundAlpha|アルファチャンネルのみのBackgraundAlpha|
|FillPaint|対象図形のfill属性に設定された色で塗り潰した画像を入力とする|
|StrokePaint|対象図形のstroke属性に設定された色で塗り潰した画像を入力とする|


### mode属性

|値|内容|
|---|---|
|normal|feMergeと同じ|
|multiply|inとin2を乗算する|
|screen|加算合成した値から乗算合成の値を減算する|
|overlay|下の色が暗い場合は乗算、下の色が明るい場合はスクリーン|
|darken|inとin2の暗い方を採用|
|lighten|inとin2の明るい方を採用|
|color-dodge|下の色を上の色の逆数で割った結果(前景が黒い場合変化無し、背景の逆色の前景は完全に明るい色)|
|color-burn|下の色を反転、値を上の色で除算し、その値を反転|
|hard-light|上の色が暗い場合は乗算、上の色が明るい場合はスクリーン|
|soft-light|hard-lightよりソフト|
|difference|明るい色から暗い色を差し引く(黒いレイヤーは効果無し、白いレイヤーは他のレイヤーの色を反転)|
|exclusion|differenceとの違いは、コントラストが低くなる|
|hue|上の色の色相、下の色の彩度と明度を使用|
|saturation|上の色の彩度、下の色の色相と明度を使用(灰色の背景は効果なし)|
|color|上の色の色相と彩度、下の色の明度を使用(グレーレベルを保持)|
|luminosity|上の色の明度、下の色の色相と彩度を使用|

### operator属性

|値|内容|
|---|---|
|over|feMergeと同じ|
|in|inの画像のうち、in2と共通の領域のみを出力する|
|out|inの画像から、in2と共通の領域を除いたものを出力する|
|atop|in2の画像の上にoperator="in"の合成結果を重ねるて出力する|
|xor|inとin2を重ねた画像から、inとin2の共通の領域を除いたものを出力する|
|arithmetic|k1、k2、k3、k4の各属性値を係数として計算した結果を出力する|



### 光源

#### feDiffuseLighting
布やゴムなどの表現に適します。

feGaussianBlurは、feDiffuseLightingの入力となるハイトマップを生成します。
輪郭をぼかしたシルエット画像をハイトマップとして使います。

|属性|内容|
|---|---|
|surfaceScale|ハイトマップの高さ|
|diffuseConstant|光源の光の強さ|
|lighting-color|光源の色|




ライトの情報は、feDiffuseLightingタグの子要素として記述

|光源の種類|内容|
|---|---|
|feDistantLight|平行光源|
|fePointLight|点光源|
|feSpotLight|スポットライト|





##### operator
feCompositeのoperator="arithmetic"で元の画像と合成します。
合成方法がarithmeticの場合、feCompositeタグにはk1～k4の4つの属性を指定できます。

|feCompositeの属性|内容|
|---|---|
|k1|物体の色とライティング結果は乗算にするので1|
|k2|不要なので0|
|k3|環境光をエミュレートするためにk3に適当な値を指定|
|k4|不要なので0|



```:svg
 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" >
  
    <filter id="lighting">
      <feGaussianBlur stdDeviation="8" in="SourceAlpha" />
  
      <feDiffuseLighting surfaceScale="10" diffuseConstant="1" lighting-color="#fff" result="diffuse">
        <fePointLight x="50" y="50" z="50" />
      </feDiffuseLighting>
   
      <feComposite operator="arithmetic" in="diffuse" in2="SourceGraphic" k1="1" k2="0" k3="0.5" k4="0"  />
    </filter>
      
    <circle cx="100" cy="100" r="50" fill="#1e90ff" filter="url(#lighting)"/>
      
   </svg>   
``` 
※feGaussianBlurは、feDiffuseLightingで使うハイトマップを生成


#### feSpecularLighting
プラスチックや金属のような鏡面反射光の表現に適します。

|属性|内容|
|---|---|
|specularConstant|ライトの強さ|
|specularExponent|値を大きくすると金属的な鋭いハイライトになる|
※他の属性、ライトの指定方法はfeDiffuseLightingと同じです。

##### operator
feCompositeのoperator="arithmetic"で元の画像と合成します。
合成方法がarithmeticの場合、feCompositeタグにはk1～k4の4つの属性を指定でます。

|feCompositeの属性|内容|
|---|---|
|k1|合成方法を加算にするので1|
|k2|不要なので0|
|k3|合成方法を加算にするので1|
|k4|不要なので0|




```:svg
 <filter id="lighting">
    <feGaussianBlur stdDeviation="8" in="SourceAlpha" />
    
    <feSpecularLighting surfaceScale="10" specularConstant="1" specularExponent="10" lighting-color="#fff" result="specular">
      <fePointLight x="250" y="-50" z="100" />
    </feSpecularLighting>
  
   <feComposite operator="arithmetic" in="specular" in2="SourceGraphic" k1="0" k2="1" k3="1" k4="0" />
  </filter>
      
    <circle cx="100" cy="100" r="50" fill="#1e90ff" filter="url(#lighting)"/>
      
   </svg>   
```
※feGaussianBlurは、feDiffuseLightingで使うハイトマップを生成


### 学習ツール
[SVG Filters](https://yoksel.github.io/svg-filters/#/)
SVGフィルターをスライダーで操作して、結果を確認しながら学習できます。










## mix-blend-mode
※IEとEdgeでは使えません。

```:css
mix-blend-mode: overlay;
```



|値|意味|内容|
|---|---|---|
|darken|比較(暗)|上下の画像を比較して暗いピクセルが表示される|
|lighten|比較(明)|上下の画像を比較して明るいピクセルが表示される|
|multiply|乗算|暗い表現を作るときに使う描画モード|
|color-burn|焼きこみ|乗算よりもより暗くなる描画モード|
|screen|スクリーン|明るい表現を作るときに使う|
|color-dodge|覆い焼き|スクリーンよりもより明るくなる|
|overlay|オーバーレイ|乗算とスクリーンの両方に近い効果|
|soft-light|ソフトライト|明るい部分はさらに明るく、暗い部分はさらに暗くする|
|hard-light|ハードライト|ソフトライトよりも強い効果が得られる|
|difference|差の絶対値|二枚の画像の違いを可視化|
|exclusion|除外|差の絶対値よりも弱い効果が得られる|
|hue|色相|下レイヤーの輝度と彩度、上レイヤーの色相|
|saturation|彩度|下レイヤーの輝度と色相、上位レイヤー彩度|
|color|カラー|下レイヤーの輝度、上位レイヤーの彩度と色相|
|luminosity|輝度|HSL色空間で合成　下レイヤーの彩度と色相、上位レイヤーの輝度|

```:html
<div class="image1"><img src="image1.jpg" alt=""></div>
<div class="image2"><img src="image2.jpg" alt=""></div>
```

```:css
.image1 {
  position: absolute;
  z-index: 0;
}
 
.image2 {
  position: absolute;
  z-index: 1;
  mix-blend-mode: luminosity;
}
```