Webサイト内で、サムネイル画像が丸く表示されているものをよく見かけると思いますが、かつては丸く画像を切り抜いて「png」として書き出し配置して表現しましたが、今ではCSSの指定のみで簡単に行えます。ちょっとしたアクセントとして、プロフィール画像を丸くしたりしてちょっと可愛くするのもいいかもしれません。
それでは見ていきましょう。
HTMLを記述
下のような正方形のサムネイル画像を<li>で囲い9つ並べています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li><a href="#"><img src="images/img1.jpg" alt="sanple1" /></a></li> <li><a href="#"><img src="images/img2.jpg" alt="sanple2" /></a></li> <li><a href="#"><img src="images/img3.jpg" alt="sanple3" /></a></li> <li><a href="#"><img src="images/img4.jpg" alt="sanple4" /></a></li> <li><a href="#"><img src="images/img5.jpg" alt="sanple5" /></a></li> <li><a href="#"><img src="images/img6.jpg" alt="sanple6" /></a></li> <li><a href="#"><img src="images/img7.jpg" alt="sanple7" /></a></li> <li><a href="#"><img src="images/img8.jpg" alt="sanple8" /></a></li> <li><a href="#"><img src="images/img9.jpg" alt="sanple9" /></a></li> </ul> |
続いて画像を丸くしていきます。
CSSを記述
画像の<img>タグに対して「border-radius」を指定しますが、このborder-radiusの値を画像の横幅と同じ数値にすることで円形に切り抜かれたような見栄えが表現できます。
サンプルでは、サムネイルを写真の枠のように白の境界線を5pxに指定し、マウスオーバーで不透明度80％になるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 |
img { width: 150px; border-radius: 150px; border: 5px solid #FFF; box-shadow: 0 3px 3px #ccc; } img:hover { filter: alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; } |
以上で完成です。