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.
Excelente Artíсulo
Me encantó lа manera en que aborԁа sobre el tema.
Volveré rеgresandο esta рágіna
Gracias !!
gracias, lo simple es lo mejor (a veces)
Ok, 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.
Saludos
No se puede leer todo el código, aparece cortado.
Algun sitio para descargarlo?
muchas gracias
excelente gracias, pero en internet explorer no funciona muy bien
Excelente Tutorial! realmente los felicitos! Es de gran ayuda y nos da la posibiolidad de tener otras alternativas.