読者です 読者をやめる 読者になる 読者になる

キロクのブログ

変わりゆく風景やものを単なる私的思い入れで記録中。意外とのんびりしてられない。

[HTML・CSS]CSSでエフェクト:画像の縁をほわっと装飾

CSSを使って画像の縁をふんわり見せる装飾をしてみました。
「box-shadow」を使うと、「水平方向の距離」「垂直方向の距離」「ぼかし距離」「広がり距離」「影の色」を指定することができます。


.img {
     margin:5px 5px; 
     padding: 2px;
     background: #fff;
     -webkit-box-shadow:1px 1px 5px 5px #e6e6e6;
     -moz-box-shadow:1px 1px  5px 5px #e6e6e6;
     -o-box-shadow:1px 1px  5px 5px #e6e6e6;
     -ms-box-shadow:1px 1px  5px 5px #e6e6e6;
     box-shadow:1px 1px 5px 5px #e6e6e6;
     }

値は左から
水平の距離(1px)
垂直の距離(1px)
ぼかしの距離(5px)
広がりの距離(5px)
影の色(#e6e6e6)

  • 水平方向の距離(必須):正の値だと右へ、負の値だと左へ影が移動。
  • 垂直方向の距離(必須):正の値だと下へ、負の値だと上へ影が移動。
  • ぼかし距離(任意):ぼんやりの強さを指定
  • 広がり距離(任意):全方向への広がりの大きさを指定
  • 影の色(必須):rgbaで色の指定することも可。

あってもなくてもいいエフェクトだけど、値や色を変えるだけでもちょっと感じ変わります。
ちなみに、「img」の部分はブログサービスによって異なるので適宜変えてください。「.post img」だったり「entry-content img」だったりします。