Template Style

CSS3 iPhone 3G に続き、今度は、CSS3 と HTML で iPad2 を作ってみました。

<div id="frame">
	<div id="display">
		<div id="shape"></div>
		<div id="camera"></div>
		<div id="screen"></div>
		<div id="homebutton"></div>
	</div>
</div>

#frame {
	position: relative;
	margin: 50px auto;
	width: 500px;
	height: 640px;
	border-top: 1px solid #b1b2b3;
	border-right: 1px solid #979899;
	border-bottom: 1px solid #7e7f80;
	border-left: 1px solid #979899;
	background: -moz-linear-gradient(left, #b1b2b3, #cacbcc 10%, #cacbcc 90%, #b1b2b3);
	background: -webkit-gradient(linear, left center, right center, from(#b1b2b3), color-stop(0.1, #cacbcc), color-stop(0.9, #cacbcc), to(#b1b2b3));
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	text-align: center;
	z-index: 1;
}
#frame:after {
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	right: 1px;
	border-top: 1px solid #e3e4e5;
	border-bottom: 1px solid #cacbcc;
	background: -moz-linear-gradient(left, #e3e4e5, #f0f1f2 20%, #f0f1f2 80%, #e3e4e5);
	background: -webkit-gradient(linear, left center, right center, from(#e3e4e5), color-stop(0.2, #f0f1f2), color-stop(0.8, #f0f1f2), to(#e3e4e5));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	content:" ";
	z-index: -1;
}
#display {
	width: 488px;
	height: 628px;
	margin: 4px;
	border-top: 2px solid #000000;
	border-right: 2px solid #000000;
	border-bottom: 2px solid #3e3f40;
	border-left: 2px solid #313233;
	background: -moz-linear-gradient(right top, #4b4c4d, #0f0f0f 30%, #0f0f0f);
	background: -webkit-gradient(linear, right top, left bottom, from(#4b4c4d), color-stop(0.3, #0f0f0f), to(#0f0f0f));
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
}
#camera {
	position: relative;
	top: 22px;
	margin: 0 auto;
	width: 8px;
	height: 8px;
	background: -moz-linear-gradient(top, #000000, #313233);
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), to(#313233));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#camera:after {
	position: absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	background: -moz-linear-gradient(top, #171819, #474849);
	background: -webkit-gradient(linear, center top, center bottom, from(#171819), to(#474849));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	content:" ";
}
#screen {
	width: 384px;
	height: 512px;
	margin: 45px 50px 16px 50px;
	border: 2px solid #252626;
	background: url(/ipad2-capture.png) no-repeat 50% 50%, -moz-linear-gradient(center top, #4b4c4d, #0F0F0F 30%, #0F0F0F);
	background: url(/ipad2-capture.png) no-repeat 50% 50%, -webkit-gradient(linear, right top, left bottom, from(#4b4c4d), color-stop(0.3, #0F0F0F), to(#0F0F0F));
}
#shape {
	position: absolute;
	right: 6px;
	top: 6px;
	border-top: 500px solid rgba(255, 255, 255, 0.1);
	border-left: 300px solid transparent;
}
#homebutton {
	position: relative;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	padding: 8px;
	background: -moz-linear-gradient(top, #000000, #000000 25%, #606366);
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.25, #000000), to(#606366));
	-moz-border-radius: 26px;
	-webkit-border-radius: 26px;
}
#homebutton:after {
	position: absolute;
	top: 8px;
	left: 8px;
	bottom: 8px;
	right: 8px;
	width: 10px;
	height: 10px;
	border: 1px solid #646566;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	content:" ";
}