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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
<style>
body { font-family: Arial, Helvetica, sans-serif; }
.fecha {
background-color:#c02f55;
position:absolute;
padding:45px 5px 0px;
margin:0px;
}
.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>
</head>
<body>
<div class="fecha">
<span class="dia">31</span>
<span class="mes">July</span>
<span class="year">2009</span>
</div></body>
</html>
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.
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.
[...] tip original ha aparecido en unos de mi blog favoritos de diseño web, Gloobs. 2 Noviembre 2009 | carazo | Etiquetas: css, html, rotar, tip| Sin Comentarios [...]
noviembre 2nd, 2009 at 13:26Información Bitacoras.com…
Valora en Bitacoras.com: 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 …..
noviembre 3rd, 2009 at 9:31Comentario…
[..]Articulo Indexado Correctamente[..]…
noviembre 4th, 2009 at 0:15[...] bloobs me encuentro con el siguiente “truco de diseño web con CSS“. Vamos a girar un texto, algo que [...]
noviembre 24th, 2009 at 10:23Excelente Tutorial! realmente los felicitos! Es de gran ayuda y nos da la posibiolidad de tener otras alternativas.
diciembre 22nd, 2009 at 4:27excelente gracias, pero en internet explorer no funciona muy bien
marzo 23rd, 2010 at 19:17[...] El contenido de este Post, ahora está en el Blog de Diseño Web Gloobs [...]
junio 20th, 2011 at 14:27No se puede leer todo el código, aparece cortado.
Algun sitio para descargarlo?
muchas gracias
octubre 31st, 2011 at 16:39Ok, tienes toda la razón, por algún motivo el contenido del post estaba dañado. He vuelto a colocar, esta vez, todo el código.
noviembre 4th, 2011 at 10:09Saludos
gracias, lo simple es lo mejor (a veces)
abril 7th, 2012 at 0:33