15 Feb
Blog-Kalender-Icon mit CSS
Für alle die es ausprobieren wollen.
mit 2 Beispielen
<style type="text/css">
/*<![CDATA[*/
.blogpost{width:100%;}
/* Pure CSS Calendar Icon */
.blogcalendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:50px;
background:#ededef;
background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
font:bold 20px/40px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px 20px 3px 3px;
-webkit-border-radius:3px 20px 3px 3px;
-khtml-border-radius:3px 20px 3px 3px;
-o-border-radius:3px 20px 3px 3px;
border-radius:3px 20px 3px 3px;
position:relative;
border-color:#000000;
border-width:1px;
border-style:solid;
padding:3px
}
.blogcalendar em{
display:block;
font:normal bold 11px/20px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top, #04599a, #00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border:1px solid #00365a;
}
.blogcalendar:before, .blogcalendar:after{
content:'';
float:left;
position:absolute;
top:4px;
width:6px;
height:6px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
-webkit-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
}
.blogcalendar:before{left:7px;}
.blogcalendar:after{right:7px;}
.blogcalendar em:before, .blogcalendar em:after{
content:'';
float:left;
position:absolute;
top:-3px;
width:2px;
height:10px;
background:#dadada;
background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
background:-moz-linear-gradient(top, #f1f1f1, #aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.blogcalendar em:before{left:9px;}
.blogcalendar em:after{right:9px;}
/*]]>*/
</style>