CSSでグロー効果っぽいやつ

イラスト制作でよく使うフィルター効果を、CSS3 filterでも実現できないかなと思ってやってみました。
イメージとちょっと違ったけどこんな感じに。
わかりやすくするためにアニメーションさせています。

cssはこんな感じ。

.css-grow {
  position: relative;
  display: block;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.css-grow:before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: inherit;
  background-size: 100%;
  mix-blend-mode: color-dodge;
}

コントラスト上げて、少しぼかして、透明度下げて、ブレンドモード覆い焼き。
元の絵もグロー効果付けてるからわかりにくいかも。

マウスオーバーのエフェクトとか色々使えそうな気がします。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。