09Sep2009
Rotating Text with CSS
If you look up you'll notice I made a small update to the way dates are presented in my headings. It's not a big change, but I wanted to include the year without increasing the height of the date stamp.
Rotating text to the rescue! Following Jonathan Snook's article it was easy to implement the few lines of CSS necessary to make this adjustment.
Getting it to look right in IE7 and IE8 was a different matter. In the end I used the *:first-child+html hack for IE7 and the \9 hack for IE 8.
I realize that I should replace these hacks with conditional comments (should I?), but for now they'll suffice. Also, with a little more research it looks like this IE7/8 hack would have been more elegant.
Posted on: September 9, 2009 | 18 Comments
Recent Entries in "CSS"
- leading atlanta web design company
- Web Designers
- Web Design Community
- منتديات
- Virtual Dedicated Server
- how to build a website
- flash templates
- Generate Leads Online
- Dedicated Servers
- Blogging
- CSS
- Popular
- Real Life
- SEO
- Showcases
- Tools & Resources
- Top Ten Lists
- Usability
- Web Design
- Web General
- Writing for the Web
- What's the Best Search Box Size? (16)
- Ecommerce Copywriting: 11 Product Descriptions Compared (10)
- To Click or Not to Click (15)
- Interactive Media Awards Top 10 Websites of 2009 (8)
- Aren't Websites Supposed to Save Money? (17)
- Are Your Error Messages Easily Understood? (40)
- Website Redesign: Big Bang, Gradual or Evolutionary Approach? (28)
- JavaScript Physics Engine (10)
- Recover Data from a Damaged Hard Drive Using a Live CD (13)
- How to Apologize for Service Issues (12)
- CSS Rounded Corners 'Roundup' (82)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
- Designing Interfaces: Patterns for Effective Interaction Design
- Blog Design Solutions
- Designing Web Usability
- 101 Essential CSS Tips, Tricks, & Hacks
- Web Standards Solutions
- Web ReDesign 2.0: Workflow that Works
- The Zen of CSS Design
- Don't Make Me Think
- Bulletproof Web Design
- DOM Scripting
- View more recommended reading…
18 Comments Posted (Add Yours)
Doesn't work in Opera unfortunately.
1. Posted by John Faulds on September 09, 2009
Sweet. I like the effect. Somebody asked last week whether the entire contents of a div could be rotated.
I'll follow your research and see if this may be possible.
2. Posted by Alaska Web Design on September 09, 2009
Looks great in IE8, but unfortunately breaks in Firefox 3
3. Posted by Kerri on September 09, 2009
What's the combined IE7/8 hack?.
I'm on FF3.5 and it's fine by the way!
4. Posted by Evan Skuthorpe on September 10, 2009
Seems rather a lot of hassle for something that you would be much easier with images and have the final result looking a lot better too.
5. Posted by Aardvarked on September 11, 2009
Yes, the Opera issue is a bit of a problem. Perhaps I'll have to use the original CSS sprite method instead.
6. Posted by Christian Watson on September 12, 2009
Just what I needed, been looking to hack IE8. It was for something completely different but thanks.
7. Posted by Richard on September 14, 2009
Wow, i've been wondering how this was being done before when I've seen it else where. It's working just fine in Firefox 3.5.3 too. Why everything has to be so hard with IE i'll never understand... good hacks you've suggested though, thanks!
8. Posted by Luci on September 15, 2009
That is pretty cool. Great idea for blogs.
9. Posted by Jon on October 01, 2009
Word Luci, IE really is a pain. I still don't get it. Thanks for the suggestions/ideas.
10. Posted by Autonomy on October 09, 2009
It's an interesting idea, but could also be a very bad one when put into the wrong hands! Imagine badly designed sites made worse with a load of text that isn't facing the right way!
But at the moment it seems as though it's more of a hack than functionality, in this case it looks pretty nice.
11. Posted by James Kemp on October 15, 2009
This is something that can help me i think. I am new to web design and have had so many IE problems that it makes my head hurt. Most of them to do with Spry and Iframes not showing up like i want them to.
12. Posted by Robert on October 18, 2009
Interesting share! We were tweaking our blog (wordpress) and this might help.
13. Posted by Xaby on October 23, 2009
Very cool CSS tip for us web design company guys- looks great!
ps: there's nothing wrong with things that don't work in IE 6 or 7 (or even 8) as long as they degrade decently.
14. Posted by Patrick on October 31, 2009
Cool great idea
15. Posted by Jack on November 02, 2009
Very nice little trick. Comes in handy in the toolbox. Can't wait to try it myself.
16. Posted by Sebby on November 05, 2009
Seems to work in Firefox 3.5 and IE8. Very, very, useful bit of CSS, been trying to do this for hours on a website and you've given me the answer. Thanks for the post.
17. Posted by Basic Websites on December 01, 2009
Not looking so good on FF to be honest. The Date somewhat covers half of the year!
18. Posted by Web Design from Lyons Solutions on December 27, 2009