Rotar texto Html con CSS

En bloobs me encuentro con el siguiente ???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.

rotar-html

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>

En la imagen de este post, podéis ver cómo queda este código ejemplo.

1 comentario en “Rotar texto Html con CSS

Deja un comentario