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件のコメント »

コメントを残す

Burger Web Layout(.psdファイル)

burger

ダウンロードはこちら

Pen Web Layout(.psd)

pen

ダウンロードはこちら

Artist Web Layout(.psd)

artist

ダウンロードはこちら

Transport Web Layout(.psdファイル)

transport

ダウンロードはこちら

Law office web layout (.psdファイル)

lawoffice

ダウンロードはこちら

Water web layout (.psd)

water

ダウンロードはこちら

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

soup

ダウンロードはこちら

School Web Layout(.psdファイル)

school

ダウンロードはこちら

Jewerly Web Layout(.psdファイル)

jewerly

ダウンロードはこちら

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

coffeeshop

ダウンロードはこちら

Silhouette Web Design(.psdファイル)

Silhouette

ダウンロードはこちら

Web Service Layout(.psdファイル)

service

ダウンロードはこちら

Fruits Web Layout (.psdファイル)

fruits

ダウンロードはこちら

Sound Item Web Layout(.psdファイル)

sound

ダウンロードはこちら

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

frame

ダウンロードはこちら

Construction SubPage2 web layout(.psdファイル)

building3

ダウンロードはこちら

Construction SubPage Web Layout (psdファイル)

building2

ダウンロードはこちら

Constraction Web Layout(.psdファイル)

building

ダウンロードはこちら

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

sports

ダウンロードはこちら

Furniure Web Layout (.psdファイル)

furniture

ダウンロードはこちら

Winery Web Layout(.psdファイル)

winery

ダウンロードはこちら

Dish Web Layout(.psdファイル)

plate

ダウンロードはこちら

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

flowershop

ダウンロードはこちら

Soccer Web Layout(.psdファイル)

soccer

ダウンロードはこちら

Interview web layout(psdファイル)

interview

ダウンロードはこちら

Sweets Web Layout (.psd ファイル)

sweets

ダウンロードはこちら

Botanical web layout (.psdファイル)

botanical

ダウンロードはこちら

Outdoor Web Layout(.psdファイル)

outdoor

ダウンロードはこちら

Builder Web Layout (.psdファイル)

builder

ダウンロードはこちら

Hair Make Web Layout (.psdファイル)

hairmake

ダウンロードはこちら

Kitchen Web Layout (.psdファイル)

kitchen

ダウンロードはこちら

Consulting web layout (.psdファイル)

consulting

ダウンロードはこちら

Sports Gym web layout (.psdファイル)

sportsgym

ダウンロードはこちら

Factory Web Layout(.psdファイル)

factory

ダウンロードはこちら

Sightseeing web layout(.psdファイル)

sightseeing

ダウンロードはこちら

Hotel Web Layout(.psdファイル)

hotel

ダウンロードはこちら

tennis racket web layout (.psdファイル)

tennis

ダウンロードはこちら

web direction web layout (.psdファイル)

webdirection

ダウンロードはこちら

WEB SHOP Layout(.psdファイル)

shop

ダウンロードはこちら

Ice Cream web layout(.psdファイル)

icecream

ダウンロードはこちら

SUV web layout (.psdファイル)

car

ダウンロードはこちら

Bread Shop Web Layout(psdファイル)

bread

ダウンロードはこちら

EC Single Page Layout(.psdファイル)

shop

ダウンロードはこちら

Game Web Layout(.psdファイル)

game

ダウンロードはこちら

Architect Web Layout(.psdファイル)

architecture

ダウンロードはこちら

Hospital web layout (.psdファイル)

hospital

ダウンロードはこちら

Design Studio web layout (.psdファイル)

designstudio

ダウンロードはこちら

Fashion Magazine Web Layout(.psdファイル)

fashionMag

ダウンロードはこちら

Suits Web Layout (.psd ファイル)

suits

ダウンロードはこちら

Jewelry web layout(.psdファイル)

jewelry

jewelry