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