タグ

CSS3とテクニックに関するiuhyaのブックマーク (1)

  • CSS3 の border-radius を使って円形のサムネイルを作る方法2つ

    今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を2種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像(background-image)にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合

    CSS3 の border-radius を使って円形のサムネイルを作る方法2つ
    iuhya
    iuhya 2012/02/13
    うまく使えば、いい感じになりそう。
  • 1