Cómo rotar un texto HTML 90 grados

Escrito por matthew burley | Traducido por susana lópez millot
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo rotar un texto HTML 90 grados
CSS. (Stockbyte/Stockbyte/Getty Images)

Crear un sitio web requiere que el diseñador tenga al menos algún conocimiento básico de HTML, que es un lenguaje de formato utilizado para colocar los elementos Web y el contenido de una página Web. Esta técnica ha sido leída por un explorador Web para determinar cómo se debe mostrar el contenido. Para dar formato y personalizar estos elementos de manera efectiva, se hace necesaria la aplicación de las normas y estilos CSS. CSS permite cambiar la mayoría de los elementos de tu sitio web, incluyendo la orientación de los elementos textuales. En particular, se ofrece la opción de girar el texto un número específico de grados.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu programa de edición de páginas web.

  2. 2

    Elige la página donde quieres rotar el texto 90 grados, luego ábrelo.

  3. 3

    Navega a la localización de tu página donde se insertará el texto rotado.

  4. 4

    Crea un nuevo elemento "<div>" en el cuerpo de tu página con un estilo "clase" al que referirse en el CSS. Por ejemplo, "<div class="text-rotation">test</div>"crearía un elemento HTML que muestre "test".

  5. 5

    Navega a la sección "<head>" de tu página web y crea un nuevo estilo que se corresponda a la clase de elemento "<div>". En el último ejemplom esto sería "<style type="text/css">.text-rotation {display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);}</style>". Observa el "." antes del nombre de la clase CSS.

Consejos y advertencias

  • Para aplicar la rotación del texto para Internet Explorer, incluído el siguiente filtro en tu código fuente: "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=x);". The "(rotation=x)" elemento puede cambiarse a 0, 1, 2 or 3 para rotar el texto 0, 90, 180, 270 grados, respectivamente.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles