EC-CUBEカレンダーcss2(ProtoType)

クリエイターズレシピ
今回はEC-CUBEのカレンダーのcssサンプルのその2です。
全く画像を使わないコンセプトなので、IEでは見え方が残念だったりブラウザの解釈で微妙な違いが出ます。

ふわふわなサークルスタイル

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    border: none;
    margin: 0 auto 10px auto;
	padding:5px 10px 10px 10px;
    font-size: 11px;
	border-collapse:separate;
}
#calender_area table td {
	line-height:24px;
	width:24px;
	margin:0;
	padding:0;
	border:none;
    text-align:center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#calender_area th {
    padding:0;
	line-height:24px;
	width:24px;
	height:24px;
	margin:0;
    border: none;
    text-align: center;
	font-size:12px;
	font-weight:bold;
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
    text-shadow: 0px 0px 2px #e4007f;
	background: -moz-radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%, rgba(241,158,194,0) 100%); /* FF3.6+ */
	background: -moz-radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%, rgba(241,158,194,0) 80%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(241,158,194,1)), color-stop(80%,rgba(241,158,194,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%,rgba(241,158,194,0) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%,rgba(241,158,194,0) 80%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%,rgba(241,158,194,0) 80%); /* IE10+ */
	background: radial-gradient(center, ellipse cover, rgba(241,158,194,1) 0%,rgba(241,158,194,0) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f19ec2', endColorstr='#00f19ec2',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	color:#FFFFFF;
}
#calender_area table .month {
	margin:0;
	padding:5px 0;
	line-height:20px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#e4007f;
}
#calender_area .off {
    color: #e4007f;
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
	background-color:#169df9;
	font-weight:bold;
	text-shadow: 0px 0px 3px #ffffff;
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,0,1) 0%, rgba(255,255,0,0) 80%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,0,1)), color-stop(80%,rgba(255,255,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 80%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 80%); /* IE10+ */
	background: radial-gradient(center, ellipse cover, rgba(255,255,0,1) 0%,rgba(255,255,0,0) 80%); /* W3C */
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

ストライプスタイル

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    border: none;
    margin: 0 auto 10px auto;
	padding:5px 10px 10px 10px;
    font-size: 11px;
	border-collapse:separate;
	background-color: #c16;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
		color-stop(.1, rgba(255, 255, 255, .2)), color-stop(.1, transparent),
		color-stop(.2, transparent), color-stop(.2, rgba(255, 255, 255, .2)),
		color-stop(.3, rgba(255, 255, 255, .2)), color-stop(.3, transparent),
		color-stop(.4, transparent), color-stop(.4, rgba(255, 255, 255, .2)),
		color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent),
		color-stop(.6, transparent), color-stop(.6, rgba(255, 255, 255, .2)),
		color-stop(.7, rgba(255, 255, 255, .2)), color-stop(.7, transparent),
		color-stop(.8, transparent), color-stop(.8, rgba(255, 255, 255, .2)),						
		color-stop(.9, rgba(255, 255, 255, .2)), color-stop(.9, transparent),								
		to(transparent));
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 5%,
	transparent 5%,transparent 10%,rgba(255, 255, 255, .2) 10%,rgba(255, 255, 255, .2) 15%,
	transparent 15%,transparent 20%,rgba(255, 255, 255, .2) 20%,rgba(255, 255, 255, .2) 25%,
	transparent 25%,transparent 30%,rgba(255, 255, 255, .2) 30%,rgba(255, 255, 255, .2) 35%,
	transparent 35%,transparent 40%,rgba(255, 255, 255, .2) 40%,rgba(255, 255, 255, .2) 45%,
	transparent 45%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 55%,
	transparent 55%,transparent 60%,rgba(255, 255, 255, .2) 60%,rgba(255, 255, 255, .2) 65%,
	transparent 65%,transparent 70%,rgba(255, 255, 255, .2) 70%,rgba(255, 255, 255, .2) 75%,
	transparent 75%,transparent 80%,rgba(255, 255, 255, .2) 80%,rgba(255, 255, 255, .2) 85%,
	transparent 85%,transparent 90%,rgba(255, 255, 255, .2) 90%,rgba(255, 255, 255, .2) 95%,
	 transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 5%,
	transparent 5%,transparent 10%,rgba(255, 255, 255, .2) 10%,rgba(255, 255, 255, .2) 15%,
	transparent 15%,transparent 20%,rgba(255, 255, 255, .2) 20%,rgba(255, 255, 255, .2) 25%,
	transparent 25%,transparent 30%,rgba(255, 255, 255, .2) 30%,rgba(255, 255, 255, .2) 35%,
	transparent 35%,transparent 40%,rgba(255, 255, 255, .2) 40%,rgba(255, 255, 255, .2) 45%,
	transparent 45%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 55%,
	transparent 55%,transparent 60%,rgba(255, 255, 255, .2) 60%,rgba(255, 255, 255, .2) 65%,
	transparent 65%,transparent 70%,rgba(255, 255, 255, .2) 70%,rgba(255, 255, 255, .2) 75%,
	transparent 75%,transparent 80%,rgba(255, 255, 255, .2) 80%,rgba(255, 255, 255, .2) 85%,
	transparent 85%,transparent 90%,rgba(255, 255, 255, .2) 90%,rgba(255, 255, 255, .2) 95%,
	 transparent);
	background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 5%,
	transparent 5%,transparent 10%,rgba(255, 255, 255, .2) 10%,rgba(255, 255, 255, .2) 15%,
	transparent 15%,transparent 20%,rgba(255, 255, 255, .2) 20%,rgba(255, 255, 255, .2) 25%,
	transparent 25%,transparent 30%,rgba(255, 255, 255, .2) 30%,rgba(255, 255, 255, .2) 35%,
	transparent 35%,transparent 40%,rgba(255, 255, 255, .2) 40%,rgba(255, 255, 255, .2) 45%,
	transparent 45%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 55%,
	transparent 55%,transparent 60%,rgba(255, 255, 255, .2) 60%,rgba(255, 255, 255, .2) 65%,
	transparent 65%,transparent 70%,rgba(255, 255, 255, .2) 70%,rgba(255, 255, 255, .2) 75%,
	transparent 75%,transparent 80%,rgba(255, 255, 255, .2) 80%,rgba(255, 255, 255, .2) 85%,
	transparent 85%,transparent 90%,rgba(255, 255, 255, .2) 90%,rgba(255, 255, 255, .2) 95%,
	 transparent);
	 	border-radius: 20px;		/* CSS3草案 */
	-webkit-border-radius: 20px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 20px;	/* Firefox用 */
	-webkit-box-shadow:inset 0px 0px 10px 0px #c16; /* Safari, Chrome用 */
	-moz-box-shadow:inset 0px 0px 10px 0px #c16; /* Firefox用 */
	box-shadow:inset 0px 0px 10px 0px #c16; /* CSS3 */
}
#calender_area table td {
	line-height:24px;
	width:24px;
	margin:0;
	padding:0;
	border:none;
    text-align:center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
}
#calender_area th {
    padding:0;
	line-height:24px;
	width:24px;
	height:24px;
	margin:0;
    border: none;
    text-align: center;
	font-size:12px;
	font-weight:bold;
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
	background: -moz-radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%, rgba(228,0,127,0) 100%); /* FF3.6+ */
	background: -moz-radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%, rgba(228,0,127,0) 80%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(228,0,127,1)), color-stop(80%,rgba(228,0,127,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%,rgba(228,0,127,0) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%,rgba(228,0,127,0) 80%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%,rgba(228,0,127,0) 80%); /* IE10+ */
	background: radial-gradient(center, ellipse cover, rgba(228,0,127,1) 0%,rgba(228,0,127,0) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4007f', endColorstr='#00e4007f',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	color:#fff799;
}
#calender_area table .month {
	margin:0;
	padding:5px 0;
	line-height:20px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#c16;
}
#calender_area .off {
    color: #e4007f;
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
	background-color:#fff799;
	font-weight:bold;
	text-shadow: 0px 0px 3px #ffffff;
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

ギンガムチェックスタイル

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px 0;
}
#calender_area table {
    border: none;
    margin: 0 auto 10px auto;
	padding:5px 10px 10px 10px;
    font-size: 11px;
	border-collapse:separate;
	background-color: #fff;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
		color-stop(.1, rgba(255, 255, 255, .2)), color-stop(.1, transparent),
		color-stop(.2, transparent), color-stop(.2, rgba(255, 255, 255, .2)),
		color-stop(.3, rgba(255, 255, 255, .2)), color-stop(.3, transparent),
		color-stop(.4, transparent), color-stop(.4, rgba(255, 255, 255, .2)),
		color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent),
		color-stop(.6, transparent), color-stop(.6, rgba(255, 255, 255, .2)),
		color-stop(.7, rgba(255, 255, 255, .2)), color-stop(.7, transparent),
		color-stop(.8, transparent), color-stop(.8, rgba(255, 255, 255, .2)),						
		color-stop(.9, rgba(255, 255, 255, .2)), color-stop(.9, transparent),								
		to(transparent)),
		-webkit-gradient(linear, 50% 50%, -50% -50%,
		color-stop(.1, rgba(255, 255, 255, .2)), color-stop(.1, transparent),
		color-stop(.2, transparent), color-stop(.2, rgba(255, 255, 255, .2)),
		color-stop(.3, rgba(255, 255, 255, .2)), color-stop(.3, transparent),
		color-stop(.4, transparent), color-stop(.4, rgba(255, 255, 255, .2)),
		color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent),
		color-stop(.6, transparent), color-stop(.6, rgba(255, 255, 255, .2)),
		color-stop(.7, rgba(255, 255, 255, .2)), color-stop(.7, transparent),
		color-stop(.8, transparent), color-stop(.8, rgba(255, 255, 255, .2)),						
		color-stop(.9, rgba(255, 255, 255, .2)), color-stop(.9, transparent),								
		to(transparent));
	background-image: -webkit-linear-gradient(-45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent),
	  -webkit-linear-gradient(45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent),
	 -moz-linear-gradient(45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent);
	background-image: -o-linear-gradient(45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent)
	 , -o-linear-gradient(45deg, rgba(126, 206, 244, .2) 5%,
	transparent 5%,transparent 10%,rgba(126, 206, 244, .2) 10%,rgba(126, 206, 244, .2) 15%,
	transparent 15%,transparent 20%,rgba(126, 206, 244, .2) 20%,rgba(126, 206, 244, .2) 25%,
	transparent 25%,transparent 30%,rgba(126, 206, 244, .2) 30%,rgba(126, 206, 244, .2) 35%,
	transparent 35%,transparent 40%,rgba(126, 206, 244, .2) 40%,rgba(126, 206, 244, .2) 45%,
	transparent 45%,transparent 50%,rgba(126, 206, 244, .2) 50%,rgba(126, 206, 244, .2) 55%,
	transparent 55%,transparent 60%,rgba(126, 206, 244, .2) 60%,rgba(126, 206, 244, .2) 65%,
	transparent 65%,transparent 70%,rgba(126, 206, 244, .2) 70%,rgba(126, 206, 244, .2) 75%,
	transparent 75%,transparent 80%,rgba(126, 206, 244, .2) 80%,rgba(126, 206, 244, .2) 85%,
	transparent 85%,transparent 90%,rgba(126, 206, 244, .2) 90%,rgba(126, 206, 244, .2) 95%,
	 transparent);
	 	border-radius: 20px;		/* CSS3草案 */
	-webkit-border-radius: 20px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 20px;	/* Firefox用 */
	border:2px solid #7ecef4;
}
#calender_area table td {
	line-height:24px;
	width:24px;
	margin:0;
	padding:0;
	border:none;
    text-align:center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#00a0e9;
}
#calender_area th {
    padding:0;
	line-height:24px;
	width:24px;
	height:24px;
	margin:0;
    border: none;
    text-align: center;
	font-size:12px;
	font-weight:bold;
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
	color:#fff;
	background-color:#00a0e9;
}
#calender_area table .month {
	margin:0;
	padding:5px 0;
	line-height:20px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#00a0e9;
	 	border-radius: 20px;		/* CSS3草案 */
	-webkit-border-radius: 20px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 20px;	/* Firefox用 */
}
#calender_area .off {
	border-radius: 12px;		/* CSS3草案 */
	-webkit-border-radius: 12px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 12px;	/* Firefox用 */
	font-weight:bold;
	color:#fff;
	background-color:#00a0e9;
}
#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

カラフルスタイル

#calender_area {
    background-color: transparent;
    border: none;
}
#calender_area .bloc_body {
    padding: 10px;
	margin:0;
	width:230px;
	border-radius: 15px;		/* CSS3草案 */
	-webkit-border-radius: 15px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 15px;	/* Firefox用 */

	background: -moz-radial-gradient(0 0,circle farthest-side, rgba(255,255,100,0.5) 0%, rgba(255,255,100,0) 150px),
				-moz-radial-gradient(100% 50%,circle farthest-side, rgba(126,205,244,0.5) 0%, rgba(126,205,244,0) 50%),
				-moz-radial-gradient(100% 0%,circle farthest-side, rgba(241,158,194,0.5) 0%, rgba(241,158,194,0) 80%),
				-moz-radial-gradient(80% 80%,circle farthest-side, rgba(204,225,152,0.5) 0%, rgba(204,225,152, 0) 70%),
				-moz-radial-gradient(20% 90%,circle farthest-side, rgba(255,241,0,0.5) 0%, rgba(255,241,0, 0) 50%)
				; /* FF3.6+ */
	background: -webkit-gradient(radial, 0 0, 0px, center center, 10%, color-stop(0%,rgba(255,255,100,1)), color-stop(100px,rgba(255,255,100,0))),
					; /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(0 0,circle farthest-side, rgba(255,255,100,0.5) 0%, rgba(255,255,100,0) 150px),
				-webkit-radial-gradient(100% 50%,circle farthest-side, rgba(126,205,244,0.5) 0%, rgba(126,205,244,0) 50%),
				-webkit-radial-gradient(100% 0%,circle farthest-side, rgba(241,158,194,0.5) 0%, rgba(241,158,194,0) 80%),
				-webkit-radial-gradient(80% 80%,circle farthest-side, rgba(204,225,152,0.5) 0%, rgba(204,225,152, 0) 70%),
				-webkit-radial-gradient(20% 90%,circle farthest-side, rgba(255,241,0,0.5) 0%, rgba(255,241,0, 0) 50%)
				; /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(0 0,circle farthest-side, rgba(255,255,100,0.5) 0%, rgba(255,255,100,0) 150px),
				 -o-radial-gradient(100% 50%,circle farthest-side, rgba(126,205,244,0.5) 0%, rgba(126,205,244,0) 50%),
				 -o-radial-gradient(100% 0%,circle farthest-side, rgba(241,158,194,0.5) 0%, rgba(241,158,194,0) 80%),
				 -o-radial-gradient(80% 80%,circle farthest-side, rgba(204,225,152,0.5) 0%, rgba(204,225,152, 0) 70%),
				-o-radial-gradient(20% 90%,circle farthest-side, rgba(255,241,0,0.5) 0%, rgba(255,241,0, 0) 50%)
				; /* Chrome10+,Safari5.1+ */
	background:  -ms-radial-gradient(0 0,circle farthest-side, rgba(255,255,100,0.5) 0%, rgba(255,255,100,0) 150px),
				 -ms-radial-gradient(100% 50%,circle farthest-side, rgba(126,205,244,0.5) 0%, rgba(126,205,244,0) 50%),
				 -ms-radial-gradient(100% 0%,circle farthest-side, rgba(241,158,194,0.5) 0%, rgba(241,158,194,0) 80%),
				 -ms-radial-gradient(80% 80%,circle farthest-side, rgba(204,225,152,0.5) 0%, rgba(204,225,152, 0) 70%),
				-ms-radial-gradient(20% 90%,circle farthest-side, rgba(255,241,0,0.5) 0%, rgba(255,241,0, 0) 50%); /* IE10+ */
	background:radial-gradient(0 0,circle farthest-side, rgba(255,255,100,0.5) 0%, rgba(255,255,100,0) 150px),
			radial-gradient(100% 50%,circle farthest-side, rgba(126,205,244,0.5) 0%, rgba(126,205,244,0) 50%),
			radial-gradient(100% 0%,circle farthest-side, rgba(241,158,194,0.5) 0%, rgba(241,158,194,0) 80%),
			radial-gradient(80% 80%,circle farthest-side, rgba(204,225,152,0.5) 0%, rgba(204,225,152, 0) 70%),
			radial-gradient(20% 90%,circle farthest-side, rgba(255,241,0,0.5) 0%, rgba(255,241,0, 0) 50%); /* IE10+ */

}
#calender_area table {
    border: none;
    margin: 0 auto 10px auto;
    font-size: 11px;
	border-collapse:sepalate;
	border-spacing:5px;
	font-family:Arial, Helvetica, sans-serif;

}
#calender_area table td {
	line-height:30px;
	width:30px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	color:#4c7370;
}
#calender_area th {
	line-height:30px;
	width:30px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	border-radius: 15px;		/* CSS3草案 */
	-webkit-border-radius: 15px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 15px;	/* Firefox用 */
	color:#e4007f;
	font-weight:bold;
}
#calender_area table .month {
    margin:0;
	padding:2px 5px;
	text-align:center;
	color:#e4007f;
	font-size:14px;
	font-weight:bold;
}
#calender_area .off {
	line-height:20px;
	width:20px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#fff;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 80%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 80%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 80%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 80%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 80%); /* W3C */
	border-radius: 15px;		/* CSS3草案 */
	-webkit-border-radius: 15px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 15px;	/* Firefox用 */
	color:#e4007f;
	font-weight:bold;
		}

#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

iPhoneスタイル(白)

#calender_area .bloc_body {
    margin: 0 auto;
	border-radius: 4px;		/* CSS3草案 */
	-webkit-border-radius: 4px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;	/* Firefox用 */
	border:3px solid #333;
	width:222px;
	text-align:center;
}
#calender_area table {
    background: #fff;
    border: none;
    font-size: 11px;
	border-collapse:sepalate;
	border-spacing:0px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#b8bac1;
	background: -moz-linear-gradient(top,  rgba(212,214,218,0.5),  rgba(186,188,195,0.5));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#dddee1), to(#b8bac1)); /* Safari,Google Chrome用 */ 
	width:210px;
}
#calender_area table td {
	line-height:20px;
	width:30px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	border-top: 1px solid #f9f9fa;
	border-right: 1px solid #9c9fa5;
	border-bottom: 1px solid #9c9fa5;
	border-left: 1px solid #f9f9fa;
	text-shadow: 0 1px 0px #f9f9fa, 0px -1px 0px #3a3e46;  
}
#calender_area th {
	line-height:22px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	background-color:#b8bac1;
	background-color:#b8bac1;
	background: -moz-linear-gradient(top,  
            rgba(212,214,218,0.5),  
            rgba(186,188,195,0.5));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#dddee1), to(#b8bac1)); /* Safari,Google Chrome用 */ 
	width:210px;
	border-top: 1px solid #f9f9fa;
	border-right: 1px solid #9c9fa5;
	border-bottom: 1px solid #9c9fa5;
	border-left: 1px solid #f9f9fa;
	font-weight:normal;
	text-shadow: 0 1px 0px #fff, 0px -1px 0px #3a3e46; 
	font:meiryo;
}
#calender_area table .month {
    margin:0;
	padding:2px 5px;
	text-align:center;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	background-color:#000033;
		background: -moz-linear-gradient(top,  
            rgba(47,68,103,0.5)50%, 
			rgba(62,85,120,0.7) 50%,/* Firefox用 */  
            rgba(47,68,103,0.7));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#dddee1), to(#b8bac1)); /* Safari,Google Chrome用 */ 
	
	color:#FFFFFF;
}
#calender_area .off {
	line-height:15px;
	width:20px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#4d535f;
	background: -moz-linear-gradient(top, #6c7380, #4d535f);/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#6c7380), to(#4d535f)); /* Safari,Google Chrome用 */ 
	border-top: 1px solid #494e57;
	border-right: 1px solid #a1a7af;
	border-bottom: 1px solid #a1a7af;
	border-left: 1px solid #494e57;
	color:#FFFFFF;
	font-weight:bold;
	text-shadow: 0 1px 0px #7a808b, 0px -1px 0px #3a3e46;  
		}

#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

iPhoneスタイル(黒)

#calender_area {
    background-color: transparent;
    border: none;
	width:260px;
		border:1px solid #999;
	padding:80px 0 100px 0;
	border-radius: 40px;		/* CSS3草案 */
	-webkit-border-radius: 40px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 40px;	/* Firefox用 */
	background-color:#000000;
	-webkit-box-shadow: inset -1px 1px 0px 0px #eee , inset -1px -1px 0px #fff,inset -4px 4px 0px  #000 ,5px 5px 10px #999; /* Safari, Chrome用 */
	-moz-box-shadow:inset -1px 1px 0px #eee , inset -1px -1px 0px #fff,inset -4px 4px 0px  #000 , 5px 5px 10px #999; /* Firefox用 */
	box-shadow:inset -1px 1px 0px 0px #eee ,inset -1px -1px 0px #fff,inset -4px 4px 0px  #000 , 5px 5px 10px 0px #999; /* CSS3 */
background: -moz-linear-gradient(20deg, rgba(10,8,9,1) 0%, rgba(10,14,10,1) 65%, rgba(152,152,152,1) 65%, rgba(152,152,152,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(10,8,9,1)), color-stop(65%,rgba(10,14,10,1)), color-stop(65%,rgba(152,152,152,1)), color-stop(100%,rgba(152,152,152,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(20deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 65%,rgba(152,152,152,1) 65%,rgba(152,152,152,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(20deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 65%,rgba(152,152,152,1) 65%,rgba(152,152,152,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(20deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 65%,rgba(152,152,152,1) 65%,rgba(152,152,152,1) 100%); /* IE10+ */
background: linear-gradient(20deg, rgba(10,8,9,1) 0%,rgba(10,14,10,1) 65%,rgba(152,152,152,1) 65%,rgba(152,152,152,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0809', endColorstr='#989898',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	}
#calender_area .bloc_body {
    margin: 0 16px;
	border-radius: 4px;		/* CSS3草案 */
	-webkit-border-radius: 4px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;	/* Firefox用 */
	border:3px solid #000;
	width:222px;
	text-align:center;
}
#calender_area table {
    background: #fff;
    border: none;
    font-size: 11px;
	border-collapse:sepalate;
	border-spacing:0px;
	border-right: 1px solid #9c9fa5;
	border-left: 1px solid #333;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#b8bac1;
	background: -moz-linear-gradient(top,  rgba(212,214,218,0.9),  rgba(186,188,195,0.9));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(212,214,218,0.9)), to(rgba(186,188,195,0.9))); /* Safari,Google Chrome用 */ 
	width:210px;
}
#calender_area table td {
	line-height:20px;
	width:30px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	border-top: 1px solid #f9f9fa;
	border-right: 1px solid #9c9fa5;
	border-bottom: 1px solid #9c9fa5;
	border-left: 1px solid #f9f9fa;
	text-shadow: 0 1px 0px #f9f9fa, 0px -1px 0px #3a3e46;  
}
#calender_area th {
	line-height:22px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	background-color:#b8bac1;
	background-color:#b8bac1;
	background: -moz-linear-gradient(top,  
            rgba(212,214,218,0.5),  
            rgba(186,188,195,0.5));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#dddee1), to(#b8bac1)); /* Safari,Google Chrome用 */ 
	width:210px;
	border-top: 1px solid #f9f9fa;
	border-right: 1px solid #9c9fa5;
	border-bottom: 1px solid #9c9fa5;
	border-left: 1px solid #f9f9fa;
	font-weight:normal;
	text-shadow: 0 1px 0px #fff, 0px -1px 0px #3a3e46; 
	font:meiryo;
}
#calender_area table .month {
    margin:0;
	padding:2px 5px;
	text-align:center;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	background-color:#000033;
		background: -moz-linear-gradient(top,  
            rgba(47,68,103,0.5)50%, 
			rgba(62,85,120,0.7) 50%,/* Firefox用 */  
            rgba(47,68,103,0.7));/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#dddee1), to(#b8bac1)); /* Safari,Google Chrome用 */ 
	
	color:#FFFFFF;
}
#calender_area .off {
	line-height:15px;
	width:20px;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#4d535f;
	background: -moz-linear-gradient(top, #6c7380, #4d535f);/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#6c7380), to(#4d535f)); /* Safari,Google Chrome用 */ 
	border-top: 1px solid #a1a7af;
	border-right: 1px solid #a1a7af;
	border-bottom: 1px solid #494e57;
	border-left: 1px solid #494e57;
	color:#FFFFFF;
	font-weight:bold;
	text-shadow: 0 1px 0px #7a808b, 0px -1px 0px #3a3e46;  
		}

#calender_area .information {
    margin-left: 10px;
    font-size: 90%;
}

1件のコメント »

コメントを残す

Suits Web Layout (.psd ファイル)

suits

ダウンロードはこちら

Jewelry web layout(.psdファイル)

jewelry

jewelry

Japan New Year Web Layout (.psdファイル)

JAPAN

ダウンロードはこちら

Flower web layout (.psdファイル)

flowers

ダウンロードはこちら

SHAMPOO web layout (.psdファイル)

shampoo

ダウンロードはこちら

Architect Web Layout(.psdファイル)

architect

ダウンロードはこちら

Photographer web layout(.psdファイル)

photographer

ダウンロードはこちら

Fashion Web Layout (.psdファイル)

fashion

ダウンロードはこちら

Bedding Shop Web Layout(.psdファイル)

bed

ダウンロードはこちら

BAR website layout (.psdファイル)

bar

ダウンロードはこちら

Headphone Web Layout(.psdファイル)

headphone

ダウンロードはこちら

Pet Service Web Layout (.psdファイル)

petservice

ダウンロードはこちら

Japan web layout(.psdファイル)

japan

ダウンロードはこちら

Toaster Web Layout (.psdファイル)

toaster

ダウンロードはこちら

Wedding Web Layout(.psd ファイル)

wedding

ダウンロードはこちら

Cosmetics Web Layout(.psdファイル)

cosmetics

ダウンロードはこちら 使用素材 psdmockups

Suits Shop Web Layout (.psdファイル)

suitsshop

ダウンロードはこちら

Tea Shop Web Layout(.psdファイル)

teashop

ダウンロードはこちら

fashion magazine web layout

fashionmag

ダウンロードはこちら

Hotel Web Layout ( .psdファイル)

hotel

ダウンロードはこちら

Watch Shop Web Layout (.psdファイル)

watch

ダウンロードはこちら

Fruits Shop web layout(psdファイル)

fruitsshop

ダウンロードはこちら

Design Office Web Layout(.psdファイル)

designoffice

ダウンロードはこちら

Music Web Layout(.psd ファイル)

music

ダウンロードはこちら

Sweet Web Layout (.psdファイル)

sweets

ダウンロードはこちら

Winter Sports Web Layout(.psdファイル)

ski

ダウンロードはこちら

CAR Web Design(.psd ファイル)

car

ダウンロードはこちら

Shoes Web Layout (.psdファイル)

shoes

ダウンロードはこちら

coffee shop web layout(.psd ファイル)

coffee

ダウンロードはこちら

Furniture Shop Web Sample(.psd ファイル)

furniture

ダウンロードはこちら

OUTDOOR web layout (.psd ファイル)

outdoor

ダウンロードはこちら

BICYCLE SHOP web template (.psdファイル)

bicycle

ダウンロードはこちら

web design sketch(webデザインラフスケッチ .psdファイル)

restaurant

ダウンロードはこちら

white Mac Monitor mock up (Macモックアップ)

mac

ダウンロードはこちら

web design layout sample(Webデザインサンプル .psd)

layout

ダウンロードはこちら

Amplifier Isometric ICON(アンプ アイソメ アイコン .aiファイル)

amp

ダウンロードはこちら

Isometric icon “Lamp” (アイソメトリックアイコン ランプ aiファイル)

lamp

ダウンロードはこちら

Isometric Stool (スツール アイソメアイコン .aiファイル)

stool

ダウンロードはこちら

Toaster Isometric Icon(アイソメトリック トースター .ai)

toaster

ダウンロードはこちら

CoffeeMaker Isometric Icon(コーヒーメーカー アイソメアイコン .ai ファイル)

coffeemaker

ダウンロードはこちら

Light Isometric Icon ライトアイソメトリックアイコン(.ai ファイル)

light

ダウンロードはこちら

Chair Isometric Icon 椅子アイソメトリックアイコン(.ai ファイル)

chair

ダウンロードはこちら

Sofa Isometric Icon ソファアイソメトリックアイコン(.ai ファイル)

sofa

ダウンロードはこちら

Microwave Isometric Icon 電子レンジアイソメトリックアイコン(.ai ファイル)

microwave

ダウンロード

Isometric Icon Kitchen01(.ai ファイル)

kitchen

ダウンロード

HOTEL Isometric icon( ホテルアイコン .aiファイル)

hotel

ダウンロードはこちら

bakery shop icon(.ai ファイル)

BAKERYshop

ダウンロードはこちら

Isometric Icon COFFEE SHOP(アイソメトリックアイコン aiファイル)

coffeeshop

a href=”http://recipe.nakweb.com/wp-content/uploads/2017/02/coffeeshop.ai_.zip”>ダウンロードはこちら

Isometric Icon Speaker(アイソメトリックアイコン スピーカー .ai ファイル)

isometric_speaker

ダウンロードはこちら

Isometric Icon House(アイソメトリックアイコン .aiファイル)

isometric_house

ダウンロードはこちら