CSS3でどこまで画像加工ができるか試してみた

CSS3

CSS3で編集する画像を用意する

CSS3で画像編集する為に、元画像を探して用意します。

普段はPhotoshopを使って画像を編集することに慣れているのか、CSS3でどれぐらい画像編集ができるか把握しきれていないので、どこまで加工できるか試してみました。

折角なので、SassStylusPostCSSも使わずに、生のCSS3で画像編集することにしました。

加工した際の変化がわかりやすいように、なるべく色鮮やかで、配色のバランスに偏りがない画像を選択しました。

filter属性を整理する

CSS3を使った画像加工に使われる要素は、主にfilter属性です。

filterはプロパティを使用して画像を編集します。プロパティをまずは整理します。

  • blur要素をぼかす
  • grayscale要素をグレースケールにできる
  • contrastコントラストを調節できる
  • hue-rotate色相を回転させることができる
  • saturate彩度を調節できる
  • brightness明度を調節できる
  • invert階調反転させる事ができる
  • sepia要素をセピア調にできる
  • drop-shadow要素に影を追加できる
  • opacity透過率を調節できる

また、親要素にはdisplay: block; position: relative;を指定しておきます。

こうする事により、擬似クラスの1つである::after属性を利用して、要素にさらに効果を追加する事ができます(内側に影を入れたり、色調を重ねがけする事も可能)。

ぼかし(blur)

      
.filters__wrapper .blur__param--5 { filter: blur(5px);}
.filters__wrapper .blur__param--10 { filter: blur(10px);}
      
      

Photoshopでいうと、「フィルター」→「ぼかし」→「ぼかし(ガウス)」に相当するものですね。

グレースケール(grayscale)

      
.filters__wrapper .grayscale__param--50 { filter: grayscale(50%);}
.filters__wrapper .grayscale__param--100 { filter: grayscale(100%);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「彩度を下げる」ですかね。

「イメージ」→「モード」→「グレースケール」とも同じですね。

パーセンテージを調節できる点は異なりますが。

コントラスト(contrast)

      
.filters__wrapper .contrast__param--150 { filter: contrast(150%);}
.filters__wrapper .contrast__param--300 { filter: contrast(300%);}
.filters__wrapper .contrast__param--50 { filter: contrast(50%);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「明るさ・コントラスト」のコントラストに相当するものですね。

色調の回転(hue-rotate)

      
.filters__wrapper .hue__param--90d { filter: hue-rotate(90deg);}
.filters__wrapper .hue__param--180d { filter: hue-rotate(180deg);}
.filters__wrapper .hue__param--270d { filter: hue-rotate(270deg);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「色相・彩度」の色相に相当するものですね。

「色相・彩度」と違うのは、色相環の回転率から色相を変更する点。

色相環とは、マンセルが提唱した色の3属性「色相(Hue)・彩度(Chroma)・明度(Value)」の色相を、視覚的に表した丸型の図形。

隣合う色は、同系統の「類似色」。反対の色は、相反する色の「補色」を表しています。

マンセル・カラー・システムによる色相環

彩度(saturate)

      
.filters__wrapper .saturate__param--150 { filter: saturate(150%);}
.filters__wrapper .saturate__param--300 { filter: saturate(300%);}
.filters__wrapper .saturate__param--50 { filter: saturate(50%);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「色相・彩度」の彩度に相当するものですね。

明度(brightness)

      
.filters__wrapper .brightness__param--150 { filter: brightness(150%);}
.filters__wrapper .brightness__param--300 { filter: brightness(300%);}
.filters__wrapper .brightness__param--50 { filter: brightness(50%);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「色相・彩度」の明度に相当するものですね。

階調反転(invert)

      
.filters__wrapper .invert__param--60 { filter: invert(60%);}
.filters__wrapper .invert__param--100 { filter: invert(100%);}
      
      

Photoshopでいうと、「イメージ」→「色調補正」→「階調の反転」に相当するものですね。

パーセンテージを指定できる点は異なりますね。

セピア(sepia)

      
.filters__wrapper .sepia__param--50 { filter: sepia(50%);}
.filters__wrapper .sepia__param--100 { filter: sepia(100%);}
      
      

Photoshopで実現するには、「色相・彩度」からセピア調にする必要があります。

影(drop-shadow)

      
.filters__wrapper .dropshadow__param--darker { filter: drop-shadow(4px 4px 8px #212121);}
      
      

Photoshopでいうと、「レイヤー」→「レイヤースタイル」→「ドロップシャドウ」に相当するものですね。

1つ目には、水平方向(x軸)の影の位置。

2つ目には、垂直方向(y軸)の影の位置。

3つ目には、影の広がり(ぼかし)の大きさ。

4つ目には、影の色を入力します。何も入力しない場合は、黒(#000000)が適用されます。

透過率(opacity)

      
.filters__wrapper .opacity__param--60 { filter: opacity(60%);}
.filters__wrapper .opacity__param--20 { filter: opacity(20%);}
      
      

Photoshopでいうと、レイヤーメニューの「不透明度」に相当するものですね。

opacity属性と同じ効果ですね。

すりガラスを作る(応用技)

      
.blurimage__wrapper,.blurimage__contents::before {
  background: url(/images/photos/photo17_01.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}
.blurimage__wrapper {
  position: relative;
  padding: 10%;
  margin: 32px auto;
}
.blurimage__contents::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-clip: content-box;
  width: 100%;
  height: 100%;
  padding: 10%;
  top: 0;
  left: 0;
  filter: blur(5px);
}
.blurimage__main {
  padding: 10%;
  position: relative;
  text-align: center;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.blurimage__main img {
  width: 30%;
}
      
      

親要素と、子要素の::before属性に、同じ背景画像を読み込ませます。

子要素の::beforefilter: blur(5px);を適用し、子要素の背景画像のみぼかしを加えます。

box-sizing: border-box;属性を加えて、paddingも箱の大きさに含めさせます。

孫要素に、background: rgba(255,255,255,0.4);を加えて、白い曇りガラスっぽくさせます。

position: relative;も加えて、相対位置の親要素に指定します。