suin.io

CSS3で何の変哲もない画像をiPhone,iOS風のアイコンに変身させる

suin2011年1月14日

CSS3を使って、図1のような普通の画像を、図2のようにiPhone,iOS風のアイコンに変身させるTipsを紹介します。 とりあえず、デモが見たい人はこちら。 このTipsを紹介するにあたって、参考にしたサイトがこちらになります。


図1


図2

iPhone, iOSのアイコンの特徴

  • 角丸
  • グロス(上半分の反射)効果がある。グロスはグラデーションが効いている。
  • 上ボーダーが白(反射)
  • 下ボーダーが黒(影)
  • うっすらとアイコンの影が背面にある
  • タップしたとき、アイコンの明るさが暗くなる(dark light効果)

CSS3でやること

下の画像をiPhone,iOS風のアイコンに近づけるために、上の各特徴を次の方法で再現していきます。

  • 角丸: border-radiusを使って角丸を表現する
  • グロス: span.grossをアイコン画像に重ね、border-radiusで緩やかなカーブを表現する。また、gradiantを使ってグラデーションを表現する。
  • 上ボーダーが白: box-shadowを使って、上ボーダーを白くする
  • 下ボーダーが黒: box-shadowを使って、下ボーダーを黒くする
  • アイコン背面の影: box-shadowを使って、うっすらとした影を表現する
  • タップ時のdark light: グレーで塗りつぶしたspan.dark-lightをアイコンに重ねておき、:activeのとき一定の透過率で表示する

実装方法

HTMLは次のような構成になります。

<a href="#" class="icon">
<span class="gross"></span>
<span class="shadow"></span>
<span class="dark-light"></span>
</a>

  • a.icon: アイコン画像表示用
  • span.gross: グロス表現用
  • span.dark-light: タップ時のdark light効果用
  • span.shadow: アイコン背面の影用

スタイルシートは次のようになります。

.icon {
	display: block;
	height: 89px;
	width: 89px;

	background: transparent url('1.png') no-repeat;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */

	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	-o-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	}

.icon:active,
.icon:focus {
	outline: none;
	-moz-outline-style: none;
	}

.icon:active .dark-light,
.icon:active .gross {
	-ms-filter: "alpha(opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
	}

.dark-light {
	display: block;
	height: 89px;
	width: 89px;
	background: #000;
	cursor: pointer;

	-ms-filter: "alpha(opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */
	}

.gross {
	display: block;
	position: absolute;
	z-index: 5;
	width: 89px;
	height: 50px;
	cursor: pointer;
	
	/* Opera */
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI1NSwyNTUsMjU1LDAuNyk7IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiYSgyNTUsMjU1LDI1NSwwLjIpOyIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
	/* Safari, Chrome */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.2)));
	/* Firefox */
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
	/*Internet Explorer 6,7 and 8*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF, endColorstr=#33FFFFFF, GradientType=0);
	/*Internet Explorer 8 only*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF, endColorstr=#33FFFFFF, GradientType=0)";

	/* Safari, Chrome */
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 60px 10px;
	-webkit-border-bottom-left-radius: 60px 10px;

	/* Firfox */
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 60px 10px;
	-moz-border-radius-bottomleft: 60px 10px;

	/* CSS3 */
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 50px 12px;
	border-bottom-left-radius: 50px 12px;

	
	-webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Safari, Chrome */
	-o-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Opera */
	-moz-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Firefox */
	box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
	}

.shadow {
	display: block;
	position: absolute;
	z-index: 5;
	width: 89px;
	height: 89px;
	cursor: pointer;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */

	-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	
	}

デモとか

デモはこちら。

対応ブラウザとか

IEなど、CSS3に対応していないブラウザでは、一部の表現が正しく現れません。見た人は、ブラウザのバージョンと見た目を報告してもらえると助かります。

RELATED POSTS