Tema: Rotar texto + CSS
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 03/04/2012, 02:35
gebremswar
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 9 meses
Puntos: 57
Información Respuesta: Rotar texto + CSS
Bugger con este codigo

Código CSS: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. th{
  5. font: bold 12px Arial, Helvetica, Verdana;
  6. background: #d5d5d5;
  7. padding: 10px 20px 10px 20px;
  8. text-align:center;
  9. height:200px;
  10. vertical-align:bottom;
  11. margin: 0 0 10px 0;
  12. }
  13. .rotar 
  14. {
  15. display:block;
  16. white-space:nowrap;
  17. text-align: center;
  18. width:10px;
  19. -webkit-transform: rotate(-90deg);
  20. -moz-transform: rotate(-90deg);
  21. -o-transform: rotate(-90deg);
  22. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  23. }
  24. </style>
  25.     <!--[if IE]>
  26.     <style type="text/css">
  27. th
  28.         {
  29.             height: 300px;
  30.             border:1px solid red;
  31.             text-align:center;
  32.             vertical-align:bottom;
  33.             position:relative;
  34.             width:50px; /* ESTE VALOR ES "A" */
  35.             background-color:orange;
  36.         }
  37.  
  38.         
  39.         .rotar 
  40.         {
  41.             background-color:green;
  42.             display:block;
  43.             white-space:nowrap;
  44.             -webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  45.             -webkit-transform: rotate(-90deg);
  46.             -moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
  47.             -moz-transform: rotate(-90deg);
  48.             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  49.             position:absolute;
  50.             bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
  51.             bottom:5px\9;
  52.             left:0;
  53.             left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
  54.             line-height:20px;
  55.         }
  56.     </style>
  57.     <![endif]-->
  58. </head>
  59. <body>
  60.  
  61. <table><tr>
  62. <th>NRO</th>
  63. <th>ALUMNO</th>
  64. <th>&nbsp;<div class="rotar">COMUNICACION 1</div></th>
  65. <th>&nbsp;<div class="rotar">EDUCACION POR EL ARTE</div></th>
  66. <th>&nbsp;<div class="rotar">RAZONAMIENTO LOGICO</div></th>
  67. <th>&nbsp;<div class="rotar">HISTORIA</div></th>
  68. <th>&nbsp;<div class="rotar">EDUCACION FISICA</div></th>
  69. <th>&nbsp;<div class="rotar">ARTES MARCIALES</div></th>
  70. <th>&nbsp;<div class="rotar">RELIGION</div></th>
  71. <th>&nbsp;<div class="rotar">ALGEBRA</div></th>
  72. </tr></table>
  73. </body>
  74. </html>

Obtengo la siguiente salida:
* IE 8
* Firefox 11.0
* Chrome 18.0.1025.142 m
* Opera 11.62

Imagen