Contenido

Rotando texto con CSS

31 jul

+ 8

Jonathan Snook, publica un intersante artículo en el que nos muestra como rotar texto mediante CSS.

text-rotation
(Ver Imagen)

El código está claro que no es estandar y solo funciona en Safari/WebKit, Firefox e Internet Explorer.

//HTML
<div class="example-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>

//CSS
.year {
	/* WebKit, Safari */
	-webkit-transform: rotate(-90deg); 

	/* Firefox 3.5+*/
	-moz-transform: rotate(-90deg);	

	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Una alternativa más estándar, aunque más laboriosa nos la proponen los chicos de CSS-Tricks.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.