Si quieres dibujar un texto de manera vertical, puedes usar im\u00e1genes, pero no es lo m\u00e1s adecuado, por que puedes usar reglas CSS como las que te ense\u00f1amos a continuaci\u00f3n y que en cualquiera de nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web<\/strong><\/a> o IFCD0110-Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web<\/strong><\/a> puedes aprender y as\u00ed conseguir este efecto en cualquier web que desarrolles.<\/p>\n

La mayor\u00eda de los navegadores soporta el uso de rotaci\u00f3n en el texto mediante reglas CSS3, aunque para Internet Explorer ser\u00e1 necesario el uso de filtros DXMImage Transform; lo que contemplaremos en nuestro ejemplo, para que la compatibilidad no ser\u00e1 un problema.<\/p>\n

Elegiremos una direcci\u00f3n web a pintar en pantalla, por ejemplo: cdp.foc.es y el .es de la parte de la direcci\u00f3n web que rotaremos.<\/p>\n

Para los navegadores Chrome, Safari y Mozilla<\/strong> que usan webkit<\/strong> usaremos la propiedad \u201ctransform\u201d para rotar el texto.<\/p>\n

Para Opera<\/strong> la propiedad \u2013o-transform, soportada a partir de la versi\u00f3n 10.50.<\/p>\n

Para que este efecto pueda funcionar, adem\u00e1s de la propiedad \u201ctransform\u201d\u00a0 tenemos que establecer el valor de \u201cblock\u201d o \u201cinline.block\u201d a la propiedad \u201cdisplay\u201d del elemento que contiene el texto que vamos rotar.<\/p>\n

Para Internet Explorer, como suele ocurrir es un poco m\u00e1s complejo, pero se consigue aplicando la propiedad \u201cfilter\u201d con un valor llamado \u201cBasicImage\u201d para rotar cualquier elemento que se encuentre en el layout.<\/p>\n

filter:<\/strong> progid:DXImageTransform.Microsoft.BasicImage(rotation=3);<\/strong><\/p>\n

El par\u00e1metro \u201crotation\u201d puede tener valores desde el 0 al 3. Donde 0 indica que rotar\u00e1 0 grados, 1 indica que rotar\u00e1 90 grados, 2 indica que rotar\u00e1 180 grados y 3 indica que rotar\u00e1 270 grados.<\/p>\n

Para hacer este ejemplo partimos de una HTML como el siguiente:<\/p>\n

<\/p>\n

Con este c\u00f3digo y sus correspondientes reglas de estilos veremos en pantalla lo siguiente:<\/p>\n

<\/p>\n

Las reglas de estilos son las siguientes y son v\u00e1lidas para cualquier navegador:<\/p>\n

<\/a><\/p>\n

El c\u00f3digo usado para este ejemplo, puedes descargo aqu\u00ed <\/a>para probarlo e incluso mejorarlo. \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"

Si quieres dibujar un texto de manera vertical, puedes usar im\u00e1genes, pero no es lo m\u00e1s adecuado, por que puedes usar reglas CSS como las que te ense\u00f1amos a continuaci\u00f3n y que en cualquiera de nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web o IFCD0110-Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web puedes aprender y as\u00ed conseguir este efecto en cualquier web que desarrolles. La mayor\u00eda de los navegadores soporta el uso de rotaci\u00f3n en el texto mediante reglas CSS3, aunque para Internet Explorer ser\u00e1 necesario el uso de filtros DXMImage Transform; lo que contemplaremos en nuestro ejemplo, para que la compatibilidad no ser\u00e1 un problema. Elegiremos una direcci\u00f3n web a pintar en pantalla, por ejemplo: cdp.foc.es y el .es de la parte de la direcci\u00f3n web que rotaremos. Para los navegadores Chrome, Safari y Mozilla que usan webkit usaremos la propiedad \u201ctransform\u201d para rotar el texto. Para Opera la propiedad \u2013o-transform, soportada a partir de la versi\u00f3n 10.50. Para que este efecto pueda funcionar, adem\u00e1s de la propiedad \u201ctransform\u201d\u00a0 tenemos que establecer el valor de \u201cblock\u201d o \u201cinline.block\u201d a la propiedad \u201cdisplay\u201d del elemento que contiene el texto que vamos rotar. Para Internet Explorer, como suele ocurrir es […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[594,27],"tags":[535,542,552,543,554,553,550,551,530,545,555,437,546,556,557,547],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-PK","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3208"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=3208"}],"version-history":[{"count":1,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3208\/revisions"}],"predecessor-version":[{"id":3210,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3208\/revisions\/3210"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=3208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=3208"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=3208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}