Rotación de textos con CSS








Hace un par de días estuve buscando una forma de rotar texto con css para hacer un experimento en una web y me encontré una entrada en una página donde mostraban un ejemplo para rotar texto con css de una manera muy sencilla. Después de unos cuantos ejercicios logre lo que ellos hicieron mas unas modificaciones.

formato-de-imagenes

Primero que nada debemos conocer dos propiedades de los campos div, que sirven para girar el texto tanto en firefox como en chrome y safari, en donde dice 90deg es lo que el texto gira, recordemos que un circulo mide 180 grados por lo que 90 significa la mitad.

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

Ahora, como iexplorer es un navegador rebelde tendremos que usar un filtro especial que solo sirve para IE.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

La parte donde dice rotación se puede modificar por un 0,1,2,3, cada número representa representa un angulo en el que se rotará el texto, va desde 0, 90, 180 y 270 grados.
Ejemplo:
Para que sea mas claro pondré un ejemplo donde ocuparemos 4 divs, un contenedor llamado fecha donde su clase principal será fecha y 3 divs que serán clases hijas de fecha, un div para el día, otro para el mes y uno mas para el año.

<div class="fecha">
        <div class="mes">Jun</div>
        <div class="dia">30</div>
        <div class="ano">2009</div>
</div>

Ahora, en este ejemplo el div con el texto que se girara será el del año, así que debemos declararlo en la clase ano de nuestra hoja de estilos con las 2 propiedades especiales que mencione arriba.

	    .fecha .ano {
			display:block;
  			position:absolute; right:-5px; top:15px;
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			}

Como en Explorer se hace diferente agregamos la propiedad especial para IE, una clase año con un if por si el navegador con el que entra es IE y no firefox u otro.

	<!--[if IE]>
  		.fecha .ano {
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			right:5px; top:5px;
		}
	<![endif]-->

Ahora, si quieren ver como funciona, copien este código y lo guardan en un archivo html para que vean los resultados.

<HTML>
<HEAD>
 <TITLE>Ejemplo texto rotativo</TITLE>
<style>
		body { font-family: Arial, Helvetica, sans-serif; }
	    .fecha {
			background-color:#D0D0D0;
			float:right;
			position:relative;
			padding:50px 15px 0px;
            border:1px solid #404040;
			margin-left:10px;
			color: #FFFFFF;
            text-shadow: 0px 2px 3px #000000;
			}
	 	.fecha .mes {
		    text-transform: uppercase;
		    font-size:25px;
			}
		.fecha .dia {
			font-size:45px;
            line-height:45px;
			position:absolute; left:5px; top:0px;
			}
	    .fecha .ano {
			display:block;
  			position:absolute; right:-5px; top:15px;
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			}
	<!--[if IE]>
	<style>
		.fecha .ano {
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			right:5px; top:5px;
		}
	<![endif]-->
	</style>
 
</HEAD>
<BODY>
<div class="fecha">
        <div class="mes">Jun</div>
        <div class="dia">30</div>
        <div class="ano">2009</div>
</div>
 
</BODY>
</HTML>

Fuente: TextRotation





Búsquedas recientes:

  • rotacion de texto con css
  • progid:DXImageTransform Microsoft BasicImage( 45º

  • texto angulo css

  • css texto angulo

  • angulo texto css

  • texto rotativo html

  • angulo css

Comentar entrada

Loading Facebook Comments ...