これは凄い!CSS3だけで作ったWindows 7のスタートメニュー[CSS]

発想力が凄いということで、 Janko At Warp Speedより、CSS3だけで作ったWindows 7のスタートメニューの紹介です。

デモページはこちらから

ソースは、記事元に載っているのを参考にすると、使用しているCSS3のプロパティは、box-shadow、border-radius、gradient(もしくは、linear-gradient)、rgbaなどです。ソースを見てるだけでは、まったく複雑なこともしていないので、簡単に作れそうです。この調子でいくとWindows 7だけでなくてVistaなども作れそうです。

一応、下記に記事元のソースコードが見にくいのでソースコードを見やすくしました[謎]。

レイアウト

#startmenu {
	border:solid 1px #102a3e;
	overflow:visible;
	display:inline-block;
	margin:60px 0 0 20px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	position:relative;
	box-shadow: inset 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color:#619bb9;
	background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
	background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}

メニュー

#programs, #links {
	float:left;
	display:block;
	padding:0;
	list-style:none;
}
#programs {
	background:#fff;
	border:solid 1px #365167;
	margin:7px 0 7px 7px;
	box-shadow: 0 0 1px #fff;
	-moz-box-shadow: 0 0 1px #fff;
	-webkit-box-shadow: 0 0 1px #fff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
#programs a {
	border:solid 1px transparent;
	display:block;
	padding:3px;
	margin:3px;
	color:#4b4b4b;
	text-decoration:none;
	min-width:220px;
}
#programs a:hover {
	border:solid 1px #7da2ce;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow: inset 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color:#cfe3fd;
	background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
	background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));
}
#programs a img {
	border:0;
	vertical-align:middle;
	margin:0 5px 0 0;
}

リンクメニュー

#links {
	margin:7px;
	margin-top:-30px;
}
#links li.icon {
	text-align:center;
}
#links a {
	border:solid 1px transparent;
	display:block;
	margin:5px 0;
	position:relative;
	color:#fff;
	text-decoration:none;
	min-width:120px;
}
#links a:hover {
	border:solid 1px #000;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow: 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 1px #fff;
	-webkit-box-shadow: inset 0 0 1px #fff;
	background-color:#658da0;
	background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
	background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span {
	padding:5px;
	display:block;
}
#links a:hover span {
	background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
	background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5)));
}