CSS3で画像の形状を変えてみよう

今回のCSS3の実践で使う画像は以下の猫画像です。これを、CSS3で色々いじってみます。

 

画像を丸くする

画像を丸くする場合は、CSS3のborder-radiusを使います。値によって、角を丸くしたり全体を円形にすることも出来ます。

画像の角を丸くする

まずは、画像の角を丸く切り取った形にする方法から。border-radiusを使って角の丸さを指定します。

<div class="radius"><img src="photo.jpg"></div>
.radius img {
	border-radius: 10px;
}

表示サンプル

画像を円形にする ~正方形画像の場合~

次は、正方形画像を丸く切り取った円形にする方法です。border-radiusの値を50%にするだけで出来ます。

<div class="circle"><img src="photo.jpg"></div>
.circle img {
	border-radius: 50%;
}

表示サンプル

画像を円形にする ~長方形画像の場合~

ただ、上記のborder-radius:50%は、長方形画像に指定すると楕円形になってしまいます。以下の画像は、幅180px・高さ150pxの画像ですが、楕円形になっていますよね。

表示サンプル

キレイな円にしたい場合は、画像を配置するボックスを正方形の丸型にして、その後ろに背景画像を表示させるように設定します。

<div class="circle2"></div>
.circle2 {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: url(photo.jpg) no-repeat;
}

表示サンプル

画像を傾けてみよう

画像を傾ける場合は、transformを使います。

<div class="rotate"><img src="photo.jpg"></div>
.rotate {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);
}

表示サンプル

transform:rotateはボックスを回転させるプロパティです。上記の場合は「5deg」ですが、値は大きくしたり小さくしたりできます。ちなみに、正の値の場合は時計回り、負の値の場合は反時計回りに回転します。

画像に影を入れてみよう

次は画像に影を入れる方法です。影を入れる場合はbox-shadowを使います。

画像の右下に影を入れる方法

画像の右下に影を入れてみましょう。指定方法は以下のようになります。設定方法が少し面倒ですが、「水平方向」「垂直方向」「ぼかす大きさ」「広がる大きさ」の順にpx指定し、最後にRGBカラーと透明度を指定します。

<div class="shadow"><img src="photo.jpg"></div>
.shadow img {
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6);
}

表示サンプル

box-shadowの指定がちょっと難しそうですが、概要は以下の通りです。

  • 水平方向…正の値なら右に影、負の値なら左に影ができる
  • 垂直方向…正の値なら下に影、負の値なら上に影ができる
  • ぼかす大きさ…数値が大きいほどぼかしが大きくなる。逆に小さいほど影はシャープになる。
  • 広がる大きさ…正の値なら影が全方向に大きくなり、負の値なら小さくなる。
  • RGB…上記例「0,0,0」のように3桁のカラーコードで指定します。
  • 透明度…上記例「0.6」のように0~1の範囲で指定します。

画像がめくれたような影を入れる方法

続いて、「画像がめくれたような感じ」を出す影の入れ方です。これは、さきほど画像を傾けた時に使ったtransformを上手に使うことで実現できます。

<div class="curl"><img src="01.jpg"></div>
.curl {
	position: relative;
	width: 180px;
}
.curl:after {
	content: "";
	position: absolute;
	right: 15px;
	bottom: 12px;
	width: 50%;
	height: 10%;
	box-shadow: 0px 0px 10px 12px rgba(0,0,0, 0.8);
	z-index: -1;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);
}

表示サンプル

コードの説明ですが、まずは画像を配置するボックス「curl」にafter擬似要素で擬似的なボックスをつくります。そして、curlにrelative、curl:afterにabsoluteを指定して、after擬似要素側のrightとbottomで調整します。

その後、after擬似要素の幅と高さを適当な大きさに決めます。そこにbox-shadowで影を付けて、z-indexで写真の後ろに入れ込んで、最後にtransform:rotateで傾けています。イメージとしては以下のような具合です。

逆側にも影を入れてみよう

上記のめくれた感じを反対側にも入れてみましょう。after擬似要素とbefore擬似要素を使うことで、両サイドに影を付けることができます。

<div class="curl2"><img src="photo.jpg"></div>
.curl2 {
	position: relative;
	width: 180px;
}
.curl2:before {
	content: "";
	position: absolute;
	left: 15px;
	bottom: 12px;
	width: 50%;
	height: 10%;
	box-shadow: 0px 0px 10px 12px rgba(0,0,0, 0.8);
	z-index: -1;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
.curl2:after {
	content: "";
	position: absolute;
	right: 15px;
	bottom: 12px;
	width: 50%;
	height: 10%;
	box-shadow: 0px 0px 10px 12px rgba(0,0,0, 0.8);
	z-index: -1;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);
}

表示サンプル

どうでしたか?

border-radius、box-shadowは覚えてしまえば使える機会はかなりあると思います。また、transformも機会があれば是非使っていきましょう。記事では、とにかく即戦力で使えるサンプルだけを紹介しました。理解してもらいやすい(だろう)順にご紹介してみましたが、いかがでしたか?