vertical separadora separador linea generar div bootstrap align html css css3 cross-browser

html - separadora - vertical align h in div



¿Cómo puedo dibujar texto vertical con navegador de CSS? (8)

Actualizada esta respuesta con información reciente (de CSS Tricks ). Felicitaciones a Matt y Douglas por señalar la implementación del filtro.

.rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; /* Should be unset in IE9+ I think. */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

Respuesta antigua:

Para FF 3.5 o Safari / Webkit 3.1, echa un vistazo a: -moz-transform (y -webkit-transform). IE tiene un filtro Matrix (v5.5 +), pero no estoy seguro de cómo usarlo. Opera no tiene capacidades de transformación todavía.

.rot-neg-90 { /* rotate -90 deg, not sure if a negative number is supported so I used 270 */ -moz-transform: rotate(270deg); -moz-transform-origin: 50% 50%; -webkit-transform: rotate(270deg); -webkit-transform-origin: 50% 50%; /* IE support too convoluted for the time I''ve got on my hands... */ }

Quiero rotar una sola palabra de texto 90 grados, con compatibilidad con varios navegadores (> = IE6,> = Firefox 2, cualquier versión de Chrome, Safari u Opera) ¿Cómo se puede hacer esto?


Adapté esto de http://snook.ca/archives/html_and_css/css-text-rotation :

<style> .Rotate-90 { display: block; position: absolute; right: -5px; top: 15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); } </style> <!--[if IE]> <style> .Rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); right:-15px; top:5px; } </style> <![endif]-->


El módulo Modos de escritura CSS introduce flujos ortogonales con texto vertical.

Simplemente use la propiedad de writing-mode con el valor deseado.

span { margin: 20px; } #vertical-lr { writing-mode: vertical-lr; } #vertical-rl { writing-mode: vertical-rl; } #sideways-lr { writing-mode: sideways-lr; } #sideways-rl { writing-mode: sideways-rl; }

<span id="vertical-lr"> ↑ (1) vertical-lr 至<br /> ↑ (2) vertical-lr 至<br /> ↑ (3) vertical-lr 至 </span> <span id="vertical-rl"> ↓ (1) vertical-rl 至<br /> ↓ (2) vertical-rl 至<br /> ↓ (3) vertical-rl 至 </span> <span id="sideways-lr"> ↓ (1) sideways-lr 至<br /> ↓ (2) sideways-lr 至<br /> ↓ (3) sideways-lr 至 </span> <span id="sideways-rl"> ↓ (1) sideways-rl 至<br /> ↓ (2) sideways-rl 至<br /> ↓ (3) sideways-rl 至 </span>


Estoy utilizando el siguiente código para escribir texto vertical en una página. Firefox 3.5+, webkit, opera 10.5+ e IE

.rot-neg-90 { -moz-transform:rotate(-270deg); -moz-transform-origin: bottom left; -webkit-transform: rotate(-270deg); -webkit-transform-origin: bottom left; -o-transform: rotate(-270deg); -o-transform-origin: bottom left; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }


He tenido problemas al intentar hacerlo en CSS puro; dependiendo de la fuente, puede parecer un poco tonto. Como alternativa, puedes usar SVG / VML para hacerlo. Hay bibliotecas que ayudan a hacer que se crucen en el navegador con facilidad, por ejemplo, Raphael y ExtJS . En ExtJS4 el código se ve así:

var drawComp = Ext.create(''Ext.draw.Component'', { renderTo: Ext.getBody(), //or whatever.. height: 100, width: 100 //ditto.. }); var text = Ext.create(''Ext.draw.Component'', { type: "text", text: "The text to draw", rotate: { x: 0, y: 0, degrees: 270 }, x: -50, y: 10 //or whatever to fit (you could calculate these).. }); text.show(true);

Esto funcionará en IE6 + y en todos los navegadores modernos, sin embargo, desafortunadamente creo que necesitas al menos FF3.0.


Mi solución que funcionaría en Chrome, Firefox, IE9, IE10 (Cambie los grados según sus requisitos):

.rotate-text { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); filter: none; /*Mandatory for IE9 to show the vertical text correctly*/ }



Si usas Bootstrap 3, puedes usar uno de sus mixins:

.rotate(degrees);

Ejemplo:

.rotate(-90deg);