HTML Typography using CSS Text Rotation



why

I wanted to experiment with type using only HTML text.
css typography
what’s it all about

It’s about design using CSS


For sometime now, I’ve been wanting to turn my typographic poster into fully HTML text using CSS. I knew it was possible, I just didn’t know how. After hours of research on CSS Text Rotation, I came across Snook.ca site that had just the information I needed. So with a little CSS and Designs skills I coded this first Typographic poster using only HTML text. My font selections were limited of course. This didn’t really stop me from creating something really nice to look at. Stay tuned, i’ll finish more HTML Typography designs for all to see.

View the HTML CSS Text Rotation

I haven’t done any testing to this, I do know it works in Safari 4 and FF 3.5.


Aug 25 09 by everydayworks


Tags: , , ,

39 comments

  1. Very cool! It works very well in FF 3.5 and Safari 4 on my Mac. It’s not 100% pixel perfect but it’s not that far off.

  2. Nice. Very nice. (FF3.5)

  3. Looks awesome, as expected it fails badly in IE but I suppose one could just leave out the filter business and just design the IE segments to display only on 90 degree increments.

    Awesome job, I dig the look a whole lot!

  4. really, really cool !
    congrats, i like the resulting look !

  5. I think this is brilliant… the best thing i’ve seen on the entire interweb all day. Now if one of us can just find a use for this on a client site my mind would be blown.

  6. Thanks guys! This was my first shot at doing this so, I’m sure the next designs will be better.

  7. Looks great, apart from the fact all the body text is almost completely unreadable in FF3.

  8. Very nice – well done – I think I’ll give that a shot -

  9. It works in Chrome and FF3.5, but surprisingly not in Opera 9.6.4. And as expected it does not work in IE 6 (which I keep around just for testing purposes and amusement). Thanks for the showcase.

  10. Tested the page in Firefox 3.5.3 and Safari 4.0.3 in Mac.
    Screenshots here:
    http://verdanarockwell.posterous.com/html-css-rotation-browser-test

  11. That is insanely cool. I love the fact that the design can be zoomed/scaled by the browser, like a vector. The future looks good.

  12. Very nice. Also works well for Chrome since it’s built on WebKit like Safari.

    Very sad fail for IE.

  13. This is awesome. I will try this as well and see what I can come up with. Been meaning to try CSS rotation for quite some time now and this inspired me. BTW, I added you on linkedin.

  14. Hi i want to be a wordpress theme designer help me , your theme impressed me .I love this this..

  15. Looks great in FF 3.6 but everything is rotated 90 degrees in IE8 :-(

  16. Beautiful typography and it´s even more fun that it´s done with css. Gives a real hope for some fun effects and styling in the future once this has been fully adapted by all the major browsers.

    I have high hopes for IE9

  17. Works great with Google Chrome 5.0.342.9 and FF 3.6.3!

    Here’s my customized version:

    #floating_link {
    position: fixed;
    right: 0px;
    top: 300px;
    width: 120px;
    height: 24px;
    display: block;
    color: #333;
    font-size: 20px;
    text-align: center;
    background-color: #EEE;
    border: solid 3px #888;
    overflow: hidden;
    /* http://snook.ca/archives/html_and_css/css-text-rotation*/
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }

    Thanks very much. :)

Leave a comment