クリエイターズレシピ
今回は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%;
}
[...] More here: EC-CUBEカレンダーcss2(ProtoType) » Creator's Recipe [...]
この投稿へのコメントの RSS フィード。 / TrackBack URI