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":[{"id":3205,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3205-quieres-crear-listas-css-con-animacion-en-javascript-como-un-programador-web-experto-pues-apuntate-con-nosotros.html","url_meta":{"origin":3208,"position":0},"title":"Quieres crear listas CSS con animaci\u00f3n en JavaScript como un programador web experto? Pues ap\u00fantate con nosotros.","date":"13 febrero, 2017","format":false,"excerpt":"A continuaci\u00f3n vamos a explicar c\u00f3mo crear listas CSS y c\u00f3mo aplicarles animaci\u00f3n con tan solo unas pocas l\u00edneas de c\u00f3digo JavaScript. En el siguiente c\u00f3digo puedes ver c\u00f3mo con unas pocas l\u00edneas en HTML y un c\u00f3digo JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"ListasCSS-Codigo","src":"https:\/\/i1.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/08\/ListasCSS-Codigo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3199,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3199-aplica-efectos-llamativos-a-las-imagenes-que-publiques-en-tus-webs-seras-un-experto-programador-web.html","url_meta":{"origin":3208,"position":1},"title":"Aplica efectos llamativos a las im\u00e1genes que publiques en tus webs. Ser\u00e1s un experto programador web.","date":"13 febrero, 2017","format":false,"excerpt":"Si realizas alguno de los siguientes certificados de profesionalidad con nosotros: IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web. IFCD0110-Confecci\u00f3n y publicaci\u00f3n de p\u00e1ginas web Ser\u00e1s capaz de aplicar efectos llamativos a las im\u00e1genes que publiques en tus webs de forma sencilla y eficiente. De esta forma mejorar\u00e1s la presentaci\u00f3n del tus\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"web Mostrar Ocultar","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/07\/web-Mostrar-Ocultar.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3219,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3219-rendera-herramienta-0nline-para-aprender-programar-sin-necesidad-de-instalacion.html","url_meta":{"origin":3208,"position":2},"title":"Rendera: herramienta 0nline para aprender programar. \u00a1Sin necesidad de instalaci\u00f3n!","date":"13 febrero, 2017","format":false,"excerpt":"Todos los que programamos tenemos la necesidad, de poder probar el c\u00f3digo que desarrollamos de forma r\u00e1pida y eficiente. Para ello, necesitamos un entorno m\u00ednimo de programaci\u00f3n instalado en nuestro ordenador. Ahora sin necesidad de instalaci\u00f3n y todo Online, puedes escribir c\u00f3digo, HTML, CSS y JavaScripts y ver de forma\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"Rendera-Hola_Mundo","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/10\/Rendera-Hola_Mundo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3196,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3196-coloca-en-las-webs-que-publiques-efectos-llamativos-para-atraer-a-mas-visitantes.html","url_meta":{"origin":3208,"position":3},"title":"Coloca en las webs que publiques, efectos llamativos para atraer a m\u00e1s visitantes.","date":"13 febrero, 2017","format":false,"excerpt":"Los alumnos que\u00a0 realizan nuestro certificado de profesionalidad\u00a0 IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web,\u00a0 ser\u00e1n capaces de desarrollar p\u00e1ginas webs con efectos visuales, que llamen la atenci\u00f3n de los visitantes y as\u00ed generar m\u00e1s visitas en las webs que \u00a0publiquen. En la publicaci\u00f3n de hoy \u00a0explicamos c\u00f3mo hacer que los\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"Efecto_colores","src":"https:\/\/i0.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/07\/Efecto_colores.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3855,"url":"http:\/\/piloto.foc.es\/2017\/09\/13\/3855-los-desarrolladores-siguen-prefiriendo-linux.html","url_meta":{"origin":3208,"position":4},"title":"Los desarrolladores siguen prefiriendo Linux.","date":"13 septiembre, 2017","format":false,"excerpt":"Aunque Microsoft ha dado un gran salto en el intento de agradar a los desarrolladores, con el lanzamiento de Windows 10. Otros sistemas de Microsoft no gustaron mucho a los desarrolladores, pero Windows 10 con la incorporaci\u00f3n de subsistemas Linux, empieza a tener cada vez m\u00e1s seguidores. \u00a0 Pero Linux\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/09\/PINGU-LINUX1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3841,"url":"http:\/\/piloto.foc.es\/2017\/09\/06\/3841-como-medir-la-velocidad-de-carga-de-mi-pagina-web.html","url_meta":{"origin":3208,"position":5},"title":"\u00bfC\u00f3mo medir la velocidad de carga de mi p\u00e1gina web?","date":"6 septiembre, 2017","format":false,"excerpt":"Para conseguir una buena experiencia entre los usuarios de nuestra p\u00e1gina web, tenemos que conseguir que la carga de la p\u00e1gina sea lo m\u00e1s r\u00e1pida posible y conseguir que el tiempo de respuesta sea adecuado. Estas t\u00e9cnicas para la mejora de la experiencia de los usuarios web, son estudiadas por\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/09\/tiempo-de-carga.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"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}]}}