art2nd https://blog.hatena.ne.jp/art2nd/ 晴歩雨描 https://2ndart.hatenablog.com/ 写真・カメラ ホームページ、Web作成 先日、WindowsアプリGIMPで写真にビネット効果を与える加工をやってみた。 ビネット効果とは、写真の四隅周辺の光量を落として、昔のレンズで撮ったような味わいの雰囲気にすること。写真中央部が相対的に明るくなり視線が中央に集まって強調される。 今回、写真そのものを加工しないで、CSSでビネット効果を付ける方法を試してみた。 CSSのbox-shadowを使う。insetを指定することで、枠の内側に影を付けることができる。box-shadowを付けた<div>で<img>を囲う。 【オリジナル写真】 【サンプル１】 insetを2つ指定して、サイズと暗さの違う2つの影を付けている。 <styl… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2F2ndart.hatenablog.com%2Fentry%2F2019%2F02%2F15%2F091120" title="CSS「box-shadow」で、写真にビネット効果をつけてみた。 - 晴歩雨描" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/art2nd/20190215/20190215091236.jpg Hatena Blog https://hatena.blog 2019-02-15 09:11:20 rich https://2ndart.hatenablog.com/entry/2019/02/15/091120 1.0 100%