にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像の周囲をグラデーションでぼかしながら丸くくり抜くCSS [CSS3,イメージ]

四角い画像をウェブ上で丸く表示したいとき、画像を切り抜く境界部分をグラデーションでぼかして表示させたいこともあるでしょう。
画像を丸く切り抜いた上で、グラデーションを使って少しずつ透明(または白色)にしていくような描画も、わざわざ画像を加工しなくてもHTMLとスタイルシートで実現できます。

CSS3には円形グラデーションを指定する「radial-gradient」という書き方があるので、これを使います。「radial-gradient」は、IEではIE10以降でサポートされました。それ以外の代表的なブラウザではそこそこ昔から対応しています。(Firefox16、Chrome26、Safari6.1、Opera12.1以降でベンダープレフィックスなしで使えます。)

画像の周囲をグラデーションでぼかしながら丸くくり抜く表示例

下記は、元の画像と、画像の周囲をグラデーションでぼかしつつ丸く表示させた例です。

元の画像
A

どの位置からどの位置までをグラデーションにするかは、CSSで自由に設定できます。
上記のように表示するHTML+CSSの記述方法を下記に紹介します。

画像の周囲をグラデーションでぼかしながら丸くくり抜く記述方法

まず、HTMLソースは以下のように記述しておきます。
div要素を二重に重ねています。

<div class="sample gradate-image-round">
	<div class="mask">画像の周囲をぼかしながら丸くくり抜く</div>
</div>

上記のHTMLに対して、以下のCSSを適用します。

.gradate-image-round {
	background-image: url("summerriver.jpg");
	width: 250px;
	height: 113px;
	background-size: cover;
	background-repeat: no-repeat;
}
.gradate-image-round .mask {
	background-image: radial-gradient(ellipse , transparent 60%, white 72% );
	width: 250px;
	height: 113px;
}

まず、外側のdiv要素に対しては以下の5つのプロパティを使って、対象の画像を「背景画像」として表示しています。

  • background-imageプロパティを使って、背景画像の形で目的の写真「summerriver.jpg」を表示。
  • 画像サイズとボックスのサイズを一致させるために、width・heightプロパティに画像と同じサイズを指定。background-repeatプロパティに値「cover」を指定して、指定領域内に画像の表示サイズがぴったり合うようにしています。
  • background-repeatプロパティに値「no-repeat」を指定することで、背景画像が繰り返し表示されることを避けています。これは(width・heightプロパティの設定が正しければ)省略しても問題ありません。ここでは、古いブラウザでおかしく表示される可能性を下げるために念のために書いておきました。

次に、内側のdiv要素に対しては、円形グラデーションを使って「ボックスの背景色」を透明色から白色へと変化するよう記述しています。

  • background-imageプロパティの値に「radial-gradient(……);」を指定することで、円形グラデーションが描かれます。ここでの記述内容は以下の通りです。
    • ellipse」は、楕円形に表示する指定です。
    • transparent 60%, white 72%」は、60%の位置までは透明(transparent)で、そこからグラデーションを開始して、72%の位置で白色(white)にする、という指定です。(つまり、グラデーションを使ってぼかす範囲は12%)
  • widthプロパティとheightプロパティには、先程記述した親ボックスと同じサイズを指定しておきます。

上記のようにすることで、対象画像の中心から外側へ楕円形に向かっていく過程で、55%の位置から72%の位置までの領域で、透明色から白色へとグラデーションで表示されるようになります。

円形グラデーションの位置を様々にずらしてみた表示例

先の例では、「完全な透明色」から「不透明な白色」へのグラデーション位置として、中心から外側へ向かって60%の位置からグラデーションを開始し、72%の位置でグラデーションを終えるように記述しました。
この数値(パーセント)を様々に変化させることで、画像を丸くくり抜く分量と、少しずつ薄くしていく効果の分量を調整できます。

例えば以下のA~Cように。

A
B
C

Aは、冒頭で紹介した例です。グラデーションの指定部分を再掲すると、以下の通りです。

	background-image: radial-gradient(ellipse , transparent 60%, white 72% );

Bは、グラデーションの開始位置を少し早めて55%にした例です。

	background-image: radial-gradient(ellipse , transparent 55%, white 72% );

Cは、グラデーションの開始位置を少し早めて45%にした例です。

	background-image: radial-gradient(ellipse , transparent 45%, white 72% );

このように、自由にぼかす範囲を指定して画像を切り抜くことができます。
というわけで、画像の周囲をグラデーションでぼかしながら丸くくり抜く方法でした。

■関連記事:

《2016/04/07 11:18 初版公開》

()

▼当サイト内外で関連しそうな記事などを自動表示:

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

--- 当サイト内を検索 ---