En estas transiciones de estacion veraniega, se me ha ocurrido diseñar este pequeño calendario a modo de widget para el que guste de ponerlo en su blog. Utilizando CSS3, una imagen para el fondo y un poquillo de Javascript, me ha salido este mini almanaque con un diseño sencillo a la par que elegante. Se actualiza automaticamente y, si pasais el raton por encima, aumenta ligeramente de tamaño.
Para ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrarlo. Si lo prefieres, tambien telo puedes descargar haciendo clic aqui.
ver codigo
<center><table><tbody><tr><td><div class="app"><div class="app-calendario"><div id="weekday"></div><div id="day"></div><div style="font-size:16px;line-height: 10px;position:relative;left:-50px;bottom:60px;font-weight:bold;font-family: Century Gothic !important;-webkit-transform: rotate(2000deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);">
<a href="http://redeando.blogspot.com" target="_blank"><script>
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = " "
else if(myday == 1)
day = " "
else if(myday == 2)
day = " "
else if(myday == 3)
day = " "
else if(myday == 4)
day = " "
else if(myday == 5)
day = " "
else if(myday == 6)
day = " "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "
document.write(month+ "<\/font>");
</script></a></div></div></div></td></tr></tbody></table></center>
<script>
(function() {
var date = new Date(),
weekday = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"];
document.getElementById('weekday').innerHTML = weekday[date.getDay()];
document.getElementById('day').innerHTML = date.getDate();
}) ();
</script>
<style>
.app { text-align: center; }
.app-calendario a{color:#000000 !important;}
.app-calendario {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGi8xI8byJaeWPMC0L0PPBuIWeJBuGsaVEtLD2R7Z54Qlg_4QrwqNbJPMcEVJvZM_lq6_Oy1fpD2yIr3tOZaS8whuS6CO8b3JPwzvZqLOaaDI150f6BNZzIn4V8ResOTk9tn6QGoHq4k/s1600/calendario1.png);
height: 128px;font-family: Century Gothic;cursor:pointer;
margin-bottom: 24px;
width: 128px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
}
.app-calendario:hover {
transform: scale(1.1) rotate(0deg);
transition: all 0.5s ease 0s;
}
#weekday{
border-radius: 35px 35px 0 0;
color: #f9f9f9;
font-size: 24px;
line-height: 26px;
position: relative;
text-transform: lowercase;
}
#day {
border-radius: 0 0 35px 35px;
color: #15181f;
font-size: 60px;letter-spacing:1px;
font-weight: bold;
line-height: 90px;
text-shadow: -1px 0 #54B0E3, 0 1px #54B0E3, 1px 0 #54B0E3, 0 -1px #54B0E3, -1px 1px 2px #54B0E3;
}
</style>
