2017/04/18

CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす

ウェブサイトに画像をそのまま貼ると、輪郭(境界線)が強調され浮き出てしまい、変に目立ってしまうことがある。画像の輪郭をぼかせば、「ふわっ」となり背景に馴染む。
ということで、box-shadowプロパティを使って画像の輪郭をぼかす方法をまとめる。


box-shadowとは


box-shadowプロパティは、要素にドロップシャドウ効果(影をつける)を与えるときに使う。使用方法は以下のとおり。
box-shadow: (inset) <offset-x> <offset-y> <blur-radius> <spread-radius> <color>


  • inset(オプション)
    • insetキーワードを指定すると、ボックスの内側にドロップシャドウ効果が与えられる
    • 指定しない場合は、ボックスの外側にドロップシャドウ効果が与えられる
    • insetキーワードを指定した場合は、spread-radiusの値が必須になる
  • offset-x offset-y
    • 影の位置を指定する
    • offset-x: 影の水平方向の位置(正の値: 右へ、負の値: 左へ)
    • offset-y: 影の垂直方向の位置(正の値: 下へ、負の値: 上へ)
  • blur-radius
    • 影のサイズ
    • 値が大きくなると影が広がるが、影の色が薄くなる
  • spread-radius
    • 影を拡大・縮小する
    • 影のサイズも大きくしたいけど、色はそのままの濃さが良いというときに使う
  • color
    • 影の色



box-shadow と filter:drop-shadow の違い


box-shadowプロパティと、filterプロパティのdrop-shadow関数の効果は似ているが、明確な違いがあるので使い分ける必要がある。

box-shadowプロパティはブロックに対してドロップシャドウ効果を与える。
そのため、画像に透過部分があったとしても、それを囲んでいるブロックにしか影がつかない。
対してfilter: drop-shadowは、透過されていない部分にドロップシャドウ効果を与える。

おそらく文章で説明するより、実際にサンプルを見ていただいたほうが早く理解できるだろう。
<!-- index.html -->
<h1>box-shadow</h1>
<img class="box-shadow" src="../img/logo.png">

<h1>drop-shadow</h1>
<img class="drop-shadow" src="../img/logo.png">
/* style.css */
img { width: 80px; }

.box-shadow {
  box-shadow: 0 0 10px black;
}
.drop-shadow {
  filter: drop-shadow(0 0 10px black);
}


画像の輪郭をぼかす


ようやく本題に。
画像の輪郭をぼかすには、box-shadowプロパティの使い方をちょっと工夫するだけでできる。
<!-- index.html -->
<figure class="container">
  <img class="image" src="https://avatars3.githubusercontent.com/u/5305599">
</figure>
/* style.css */
body {
  background-color: gray;
}
.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.container::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 15px 15px gray;
}
.image {
  width: 100%;
  height: 100%;
}

背景色と同じ色のドロップシャドウ効果を内側につけることで、画像の輪郭をぼかすことができる。
ただし、img要素はbox-shadowプロパティにinsetキーワードをつけても内側に影がつかない。
対策として疑似要素(::after)にposition:absoluteを指定してドロップシャドウ効果を上から加える方法があるのだが、img要素では疑似要素が使えない。

そのため、.containerで囲ってスタイルを当てている。




以上

written by @bc_rikko

0 件のコメント :

コメントを投稿