Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@takeshisakuma(takeshi sakuma)

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

Last updated at Posted at 2019-09-29

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

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
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;
}
2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?