0

サムネイル画像を丸くしてちょっと可愛くしてみる

サムネイル画像を丸くしてちょっと可愛くしてみる

Webサイト内で、サムネイル画像が丸く表示されているものをよく見かけると思いますが、かつては丸く画像を切り抜いて「png」として書き出し配置して表現しましたが、今ではCSSの指定のみで簡単に行えます。ちょっとしたアクセントとして、プロフィール画像を丸くしたりしてちょっと可愛くするのもいいかもしれません。

 

 

DEMO

 

それでは見ていきましょう。

 

HTMLを記述

下のような正方形のサムネイル画像を<li>で囲い9つ並べています。

サンプル1

 

続いて画像を丸くしていきます。

 

CSSを記述

画像の<img>タグに対して「border-radius」を指定しますが、このborder-radiusの値を画像の横幅と同じ数値にすることで円形に切り抜かれたような見栄えが表現できます。

サンプルでは、サムネイルを写真の枠のように白の境界線を5pxに指定し、マウスオーバーで不透明度80%になるようにしています。

サンプル2

 以上で完成です。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > サムネイル画像を丸くしてちょっと可愛くしてみる