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>

Loading

Best view in firefox.

Excel-Formeln etc. *
zum Forum *

* in Bearbeitung

Feedback

∂ιє νєяgαηgєηнєιт нαт мι¢н zυ ∂єя ρєяѕση gємα¢нт ∂ιє ι¢н нєυтє вιη.