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%;
}

Published on 2011年10月22日 2:16 PM.
Filed under: Blog

1件のコメント »

  1. EC-CUBEカレンダーcss2(ProtoType) » Creator's Recipe より:
    2011年10月22日 6:12 PM

    [...] More here: EC-CUBEカレンダーcss2(ProtoType) » Creator's Recipe [...]

    返信

この投稿へのコメントの RSS フィード。 / TrackBack URI

EC-CUBEカレンダーcss2(ProtoType) » Creator's Recipe にコメントする

Healthcare (.xd)

heathcare

DOWNLOAD

Published on 2023年2月26日 7:59 PM.
Filed under: DownLoad

Health Care (.xd)

healthcare

DOWNLOAD

Published on 2023年2月19日 7:37 PM.
Filed under: DownLoad

Sweets (.xd)

sweets

sweets.xd

Published on 2023年2月12日 7:26 PM.
Filed under: DownLoad

Juice .xd

juice

Download

Published on 2023年2月5日 7:39 PM.
Filed under: DownLoad

Soup Restaurant

soup

Download

Published on 2023年1月29日 6:41 PM.
Filed under: DownLoad

Coffee App ui (.xd)

coffee

Download

Published on 2023年1月22日 7:46 PM.
Filed under: DownLoad

Coffee App ui (.xd)

COFFEE

DOWNLOAD

Published on 2023年1月15日 7:37 PM.
Filed under: DownLoad

Coffee App ui (.xd)

coffee

DOWNLOAD

Published on 2023年1月8日 7:56 PM.
Filed under: DownLoad

Coffee App ui (.xd)

coffee

DOWNLOAD

Published on 2023年1月1日 7:49 PM.
Filed under: DownLoad

Coffee App ui (.xd)

coffee

Download

Published on 2022年12月25日 8:05 PM.
Filed under: DownLoad

Coffee App ui (.xd)

coffee

DOWNLOAD

Published on 2022年12月18日 7:51 PM.
Filed under: DownLoad

Delivery App(.xd)

delivery

DOWNLOAD

Published on 2022年12月11日 8:03 PM.
Filed under: DownLoad

Delivery App(.xd)

delivery

Download

Published on 2022年12月4日 7:27 PM.
Filed under: DownLoad

Delivery App(.xd)

delivery

DOWNLOAD

Published on 2022年11月27日 7:46 PM.
Filed under: DownLoad

Burger app(.xd)

burger

DOWNLOAD

Published on 2022年11月20日 7:43 PM.
Filed under: DownLoad

Simulator app(.xd)

simulator

Download

Published on 2022年11月13日 7:50 PM.
Filed under: DownLoad

Payment app(.xd)

payment

DOWNLOAD

Published on 2022年11月6日 7:44 PM.
Filed under: Blog

Sleep app (.xd)

sleepapp

DOWNLOAD

Published on 2022年10月30日 7:37 PM.
Filed under: DownLoad

Tennis App (.xd)

tennis

Download

Published on 2022年10月23日 7:54 PM.
Filed under: DownLoad

Sneaker app (.xd)

sneaker

DOWNLOAD

Published on 2022年10月16日 7:43 PM.
Filed under: DownLoad

VEGETATION Finder(.xd)

plantsearch

Download

Published on 2022年10月9日 7:45 PM.
Filed under: DownLoad

Tennis App(.xd)

tennis

DOWNLOAD

Published on 2022年10月2日 7:09 PM.
Filed under: DownLoad

Tennis App(.xd)

tennis

Download

Published on 2022年9月25日 8:04 PM.
Filed under: DownLoad

Tennis app (.xd)

tennis_1

Download

Published on 2022年9月18日 6:41 PM.
Filed under: DownLoad

Smartcar app 6 (.xd)

carapp

Download

Published on 2022年9月11日 7:41 PM.
Filed under: DownLoad

Smartcar app5(.xd)

smartcar5

DOWNLOAD

Published on 2022年9月4日 6:37 PM.
Filed under: DownLoad

Smartcar app4 (.xd)

smartcar4

DOWNLOAD

Published on 2022年8月28日 6:54 PM.
Filed under: DownLoad

Smartcar app3 (.xd)

smartcar3

DOWNLOAD

Published on 2022年8月21日 6:25 PM.
Filed under: DownLoad

Smartcar app2 (.xd)

smartcar

DOWNLOAD

Published on 2022年8月14日 6:03 PM.
Filed under: DownLoad

Smartcar app (.xd)

smartcar

DOWNLOAD

Published on 2022年8月7日 7:38 PM.
Filed under: DownLoad

MY BANK APP (.XD)

MYBANK

Download

Published on 2022年7月31日 8:01 PM.
Filed under: DownLoad

My Card App(.xd)

mycard

DOWNLOAD

Published on 2022年7月24日 7:44 PM.
Filed under: DownLoad

Smarthouse(.xd)

smarthouse

DOWNLOAD

Published on 2022年7月17日 8:35 PM.
Filed under: DownLoad

Smarthouse(.xd)

smarthouse

DOWNLOAD

Published on 2022年7月10日 7:55 PM.
Filed under: DownLoad

Smarthouse (.xd)

smarthouse

DOWNLOAD

Published on 2022年7月3日 7:49 PM.
Filed under: DownLoad

Smarthouse ui(.xd)

smartbath

Download

Published on 2022年6月26日 7:57 PM.
Filed under: DownLoad

Smarthouse ui (Sound)

sound

DOWNLOAD

Published on 2022年6月19日 8:09 PM.
Filed under: DownLoad

Smarthouse ui (light)

Smarthose

DOWNLOAD

Published on 2022年6月12日 6:26 PM.
Filed under: DownLoad

Smarthouse ui (Air conditioner)

air

DOWNLOAD

Published on 2022年6月5日 8:08 PM.
Filed under: DownLoad

Smartphone App(.xd)

smartphoneapp

DOWNLOAD

Published on 2022年5月22日 8:02 PM.
Filed under: DownLoad

smartphoneApp

movieApp

DOWNLOAD

Published on 2022年5月15日 7:41 PM.
Filed under: DownLoad

Smartphone App(.xd)

app

DOWNLOAD

Published on 2022年5月8日 8:21 PM.
Filed under: DownLoad

Pets app

pet_app

DOWNLOAD

Published on 2022年5月1日 7:58 PM.
Filed under: DownLoad

Smartphone UI (.xd)

appli

Download

Published on 2022年4月24日 6:28 PM.
Filed under: DownLoad

Smartphone UI

smartphoneUI

DOWNLOAD

Published on 2022年4月17日 5:57 PM.
Filed under: DownLoad

Smartphone App (.xd)

app_1

DOWNLOAD

Published on 2022年4月10日 8:00 PM.
Filed under: DownLoad

Novelist web(.xd)

novelist

DOWNLOAD

Published on 2022年4月3日 8:07 PM.
Filed under: DownLoad

Factory Web (.xd)

Web 1920 – 1

DOWNLOAD

Published on 2022年3月27日 7:40 PM.
Filed under: DownLoad

Glass Morphism (.xd)

glassmorphism

Download

Published on 2022年3月20日 6:10 PM.
Filed under: DownLoad

Artist (.xd)

artist

DOWNLOAD

Published on 2022年3月13日 6:17 PM.
Filed under: DownLoad