Rotar texto Html con CSS

Rotar texto Html con CSS

Hoy vamos a ver otro “truco de diseño web con CSS“. Vamos a girar un texto, algo que hasta ahora no quedaba más remedio que hacerlo con una imagen. Además contamos con la ventaja de que se ve en Explorer !!, como veremos más adelante para Explorer hay que hacer algún “retoque”, pero se consigue girar, que es lo importante.

Ese “truco”, nos permite abrir aún más el diseño de nuestros sites, utilizando además texto en Html, lo cual significa menor peso y ayuda al posicionamiento SEO.

A continuación vamos a ver el código necesario y lo fácil que es usarlo.

Para conseguir que este código funcione en Explorer, tenemos que recurrir a el BasicImage Filter, un filtro que nos ayuda a ajustar color, opacidad o rotar una imagen. La propiedad de rotación de este filtro puede tomar uno de los cuatro valores: 0, 1, 2, ó 3, que producen un giro en el elemento de 0º, 90º, 180º ó 270º respectivamente.

Código para el Html

Este es el código para el ejemplo de una fecha en un post, podeís ver el resultado en la imagen principal de este post.
<div class="fecha"> <span class="dia">30</span> <span class="mes">Mayo</span> <span class="year">2009</span> </div>

Código para la CSS
Tal y como os decía, en la CSS tenemos que meter un código especial para que funcione en Explorer.

<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
float:right;
position:relative;
padding:45px 5px 0px;
margin-left:10px;
}
.fecha .mes {
text-transform: uppercase;
font-size:25px;
}
.fecha .dia {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.fecha .year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #fff;
}
</style>

Espero que os sea útil, y si lo usáis, mandad los resultados para subirlos a este post. Me gustaría poneros el ejemplo aquí mismo para que lo veáis, pero desgraciadamente WordPress no permite nada de esto, así que copiad el código y haced la prueba en vuestra máquina. En la imagen de este post, podéis ver cómo queda este código ejemplo.