↑ で、写真に枠(フレーム)を付けた。 この写真に、さらにビネット効果を付ける。ビネット効果については、以下リンク先を参照。 ビネット効果を付ける<div>を、枠を付ける<div>で囲む。 <div class="box-frame"> <div class="vignette"> <img src="img/xxx.jpg"> </div> </div> <style> img { margin: 0; padding: 0; display: block; /* これがないと余分な枠が</div></div>…

CSSで写真にシンプルな枠(フレーム)を付ける。 枠に淡い影を付ける。 <img class="box-frame" src="img/xxx.jpg"> <style> .box-frame { padding:7px; border:1px solid #ccc; background:#fff; box-shadow: 1px 1px 5px rgba(20,20,20,0.2); } </style> 角を少し丸くする。 <img class="box-frame" src="img/xxx.jpg"> <style> .box-frame { padding:7px; border:…

写真を鉛筆画、色鉛筆画、水彩画風にエフェクトをかけるCSSが見つかったので、試してみた。そのCSSは以下。 下の「coliss」の紹介記事で知った。 【オリジナル写真】 【鉛筆画】 <div class="pencil-effect"> <img src="img/xxx.jpg"> </div> <style> .pencil-effect { background-image: url(img/xxx.jpg); background-size:…

先日、WindowsアプリGIMPで写真にビネット効果を与える加工をやってみた。 ビネット効果とは、写真の四隅周辺の光量を落として、昔のレンズで撮ったような味わいの雰囲気にすること。写真中央部が相対的に明るくなり視線が中央に集まって強調される。 今回、…