Calendarios sólo con CSS

En este artículo de cssglobe.com se muestra la forma de crear calendarios usando sólo CSS así que, con un poco de paciencia, se podría amplicar a alguna de las variantes que permiten personalizar la fecha de las entradas de Blogger. Como hay muchas, sería imposible enumerarlas así que me baso en la que uso que es la explicada acá.

En ese caso, habria que cambiar el script y en lugar de esto:

fday = "<span class="lafechaDia">"+lafecha[1]+"</span>";
fmonth = "<span class="lafechaMes">"+mes[lafecha[0]]+"</span>";
fyear = "<div class="lafechaAnio">"+lafecha[2]+"</div>";
document.write(fday+fmonth+fyear);

poner esto:

var salida = lafecha[1]+"<em>"+mes[lafecha[0]]+"</em>";
document.write(salida);

El HTML final que se mostraría es muy simple y los colores tamaños y otros detalles pueden ser personalizados a gusto:

<div class="calendario">
  28 <em>Febrero</em>
</div>

28 Febrero

28 Feb

Lamentablemente, pese a que algunas cosas podemos reproducirlas en Internet Exloprer, otras requerirían demasiadas reglas diferentes asi que por el momento, me olvido de ese navegador. Este es el CSS:

.calendario { /* el contenedor */
  color: #000;
  background: #EDEDEF;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDEF), to(#CCC)); 
  background: -moz-linear-gradient(top,  #EDEDEF,  #CCC); 
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 5px;
  position: relative;
  text-align: center;
  text-shadow: #FFF 0 1px 0;
  -moz-border-radius: 3px;
  -webkit-border-radius 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 2px 2px #888;
  -webkit-box-shadow: 0 2px 2px #888;
  box-shadow: 0 2px 2px #888;
  /* esto define el tamaño */
  font-size: 30px;
  line-height: 60px;
  width: 80px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 20px 40px y 50px respectivamente */
}
.calendario em { /* el mes */
  background: #04599A;
  background: -webkit-gradient(linear, left top, left bottom, from(#04599A), to(#00365A)); 
  background: -moz-linear-gradient(top,  #04599A,  #00365A); 
  color: #FFF;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-shadow: #00365A 0 -1px 0;
  -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-top: 1px solid #00365A;
  line-height: 30px; /* esto define la altura */
}
.calendario:before, .calendario:after { /* los anillos superiores */
  background: #111;
  content:'';
  float: left;
  position: absolute;
  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;
  /* esto define el tamaño */
  height: 8px;
  top: 5px;
  width: 8px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 6px 4px y 6px respectivamente */
}
.calendario:before{
  left:11px; /* o 7px si es pequeño */
}
.calendario:after {
  right:11px; /* o 7px si es pequeño */
}
.calendario em:before, .calendario em:after { /*los círculos */
  background: #DADADA;
  background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1), to(#AAA)); 
  background: -moz-linear-gradient(top,  #F1F1F1,  #AAA); 
  content:'';
  float: left;
  position: absolute;
  z-index: 2;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  /* esto define el tamaño */
  height: 14px;
  top: -5px;
  width: 4px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 10px -3px y 2px respectivamente */
}
.calendarioBIG em:before{
  left: 13px; /* o 9px si es pequeño */
}
.calendarioBIG em:after{
  right: 13px; /* o 9px si es pequeño */
}