Diseñando un bloque de fecha con CSS

baluart30 Septiembre 2005 - 8:43am 2 comentarios
Enviar por Email Imprimir

Visitando el weblog de J Wynia, me encuentro con un pequeño script css para crear los ya conocidos bloques de fecha (CSS date Block los llama) que en su mayoría son utilizados por bitácoras de diseño.

He hecho algunos cambios al código, haciéndolo más pequeño aún, pero igual de funcional por lo menos en Firefox, IE6 y Opera.

SEP
30
2005

La diferencia entre ambos scripts radica en usar el alto de linea (line-height) para el campo día, en vez de los márgenes negativos en día y año, que podrán observar en el artículo de Wynia. Algo realmente sencillo, pero que redunda en un código más simple.

Código HTML

<div class="fecha">
 <div class="mes">
 SEP
 </div>
 <div class="dia">
 30
 </div>
 <div class="año">
 2005
 </div>
 </div>

Código CSS

.fecha {
 text-align: center;
 width: 50px;
 font-family: "Times New Roman", Times, serif;
 font-weight:bold;
 border:1px solid #000000;
 }
.mes, .año {
 font-size: 14px;
 }
.dia {
 font-size: 30px;
 line-height: 22px;
 }

Ahora bien. este es sólo un ejemplo, la idea es hacerlo acorde al diseñó de tu sitio web y esto depende de ti.

Idea Original:  J WyniaCSS Date Blocks for Blogs

Comentarios

Imagen de Yeli
Yeli

Muy bueno!! Me salvaste :)

Imagen de pUPY

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más