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

コメントを残す

Smarthouse (.xd)

smarthouse

DOWNLOAD

Smarthouse ui(.xd)

smartbath

Download

Smarthouse ui (Sound)

sound

DOWNLOAD

Smarthouse ui (light)

Smarthose

DOWNLOAD

Smarthouse ui (Air conditioner)

air

DOWNLOAD

Smartphone App(.xd)

smartphoneapp

DOWNLOAD

smartphoneApp

movieApp

DOWNLOAD

Smartphone App(.xd)

app

DOWNLOAD

Pets app

pet_app

DOWNLOAD

Smartphone UI (.xd)

appli

Download

Smartphone UI

smartphoneUI

DOWNLOAD

Smartphone App (.xd)

app_1

DOWNLOAD

Novelist web(.xd)

novelist

DOWNLOAD

Factory Web (.xd)

Web 1920 – 1

DOWNLOAD

Glass Morphism (.xd)

glassmorphism

Download

Artist (.xd)

artist

DOWNLOAD

Hospital Web Layout(.xd)

hospital

DOWNLOAD

Aquarium web layout (.xd)

AQUALIUM

DOWNLOAD

Creative(.xd)

creative

Download

Furniture Web(.xd)

furniture

Download

Burger Shop Web(.xd)

burger

Download

Studio Web (.xd)

studio

DOWNLOAD

Japan Sports web (.xd)

japansports

DOWNLOAD

Church Web Design (.xd)

church

DOWNLOAD

Photographer(.xd)

photographer

DOWNLOAD

Japan web (.xd)

japan

DOWNLOAD

Against Covid-19 web (.xd)

Web 1920 – 1

DOWNLOAD

branding web(.xd)

branding

DOWNLOAD

Art Web(.xd)

cinema

DOWNLOAD

Aquarium(.xd)

aquarium

DOWNLOAD

Interior Shop (.xd)

interiorshop

Download

Music (.xd)

music

DOWNLOAD

Flower web (xd)

flower

DOWNLOAD

Feather web (.xd)

feather

DOWNLOAD

Politician Web (.xd)

politician

DOWNLOAD

Restaurant Web(.xd)

beef_restaurant

Download

Finance web(.xd)

finance

Download

Consulting Web (.xd)

consulting

Download

Architecture web layout(.xd)

architecture

DOWNLOAD

Shoes Web(.xd)

shoes

Download

Tailor Web (.xd)

tailor

Download

Fashion Web Layout (.xd)

Web 1920 – 1

DOWNLOAD

Web Magazine web Layout (.xd)

webmagazine

DOWNLOAD

Car web (xd)

car

Download

PublicDomain web

publicdomain

DOWNLOAD

Coin Laundry

coinlaundry

Download

Machine Web (.xd)

machine

machine.xd

Sports Web Layout (.xd)

sports

Download

color web (.xd)

colorful

Download

Photographer web layout(.xd)

photographer

Download