Vertical (rotated) text in HTML table

by 
.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

Taken from http://css3please.com/

As of 2017, the aforementioned site has simplified the rule set to drop legacy Internet Explorer filter and rely more in the now standard transform property:

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

More Related Contents:

  1. How can i change the icon color to some other color in CSS?
  2. Unable to scroll on website
  3. How to Create Border In Css Iike
  4. Why not use tables for layout in HTML? [closed]
  5. CSS margin terror; Margin adds space outside parent element [duplicate]
  6. How can I position my div at the bottom of its container?
  7. Make CSS Hover state remain after “unhovering”
  8. How to make a HTML Page in A4 paper size page(s)?
  9. How do I not underline an element in a link?
  10. How create table only using tag and Css
  11. CSS Single-column layout centered fixed-width 100% height w header and footer
  12. How can I correctly select the first or the last child with CSS?
  13. Add border-bottom to table row
  14. How to set maximum height for table-cell?
  15. Add target=”_blank” in CSS
  16. Change last letter color
  17. Center image element in parent div
  18. Why is the span’s line-height useless?
  19. Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]
  20. CSS filter:invert not working with background-color
  21. CSS position absolute and full width problem
  22. Size of font in CSS with slash
  23. Equal width columns in CSS Grid
  24. How to align entire html body to the center?
  25. How do I change the font-size of an element within ?
  26. Ticks for type=”range” HTML input
  27. How to make a radio button look like a toggle button
  28. Styling autocomplete dropdowns in browsers
  29. Giving background-color to body applying whole page. Why?
  30. overflow-y:visible not working when overflow-x:hidden is present [duplicate]

Leave a Comment