画像の角丸めとシャドーを表示する方法、CSS3

Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery.

CSS3 Rounded Image With jQueryにCSS3で提供されるborder-radiusを画像に適用するためのテクニックが紹介されている。CSS3が策定されたあとはブラウザが正しくレンダリングするようになることが好ましいが、それまでの過渡期的なテクニックとして参考になる。

CSS3 Rounded Image With jQueryでは画像に対してborder-radiusを適用して角を丸め、box-shadowを適用して影をつける効果を試している。しかし、Firefoxではborder-radiusが適用されず、Webkitではインナーシャドウが適用されない。たとえば次のようなHTMLを用意してFirefox 3.6.6で閲覧すると次のようになる。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo 01</title>
<style type="text/css">
.image {
  border: solid 5px;


  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;


  box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
}
</style>
</head>
<body>
<img class="image" src="watermelon.jpg"/>
</body>
</html>

画像に対するborder-radiusが機能していない

なお、border-radiusは今のところベンダプレフィックスを指定して使う必要があるため、それぞれ-moz-border-radius、-webkit-border-radius、-moz-box-shadow、-webkit-box-shadowが併記されている。CSS3 Rounded Image With jQueryではこれに対して、画像をspan要素で包み、span要素の背景画像として表示したい画像を設定、さらに角の丸めやシャドーの指定をspan要素に適用するという方法で目的の達成を実現している。HTMLにまとめると次のようになる。

目的通りのレンダリングが実現されている

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo 02</title>
<style type="text/css">
.around {
  display: inline-block;


  background: url(watermelon.jpg) no-repeat center center;   
  width: 220px;
  height: 220px;
  border: solid 5px;


  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;


  box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
}
.image {
  opacity: 0;
}
</style>
</head>
<body>
<span class="around">
  <img class="image" src="watermelon.jpg" />
</span>
</body>
</html>

img要素はopacityを0にして表示されないようにしている。display:noneで表示させなくすることもできるが、画像のコピーやダウンロードが動作するようにopacityを0にする方法の方が便利だと説明がある。CSS3 Rounded Image With jQueryではさらにjQueryと若干のJavaScript記述を使って、このテクニックを自動的に適用する方法を紹介している。同テクニックを使うと画像サイズを手動で指定する必要がなくなるほか、HTMLにおいてspan要素を記述する必要がなくなるため、過渡期的なテクニックとして利用しやすくなる。

手動でspan要素を挟むことなく目的のレンダリングを実現している

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo 03</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".around").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background: url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px; border: solid 5px;" />';
    });


    $(this).css("opacity","0");
  });
});
</script>
<style type="text/css">
.around {
  display: inline-block;
  border: solid 5px;


  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;


  box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .4);
}
</style>
</head>
<body>
<img class="around" src="watermelon.jpg" />
</body>
</html>

ブラウザが本来のレンダリングに対応したら該当するJavaScriptコードを削除するだけでいい。HTMLそのものに不要なレンダリング目的の要素を追加する必要がなく便利。