{"id":45,"date":"2010-12-13T20:17:30","date_gmt":"2010-12-14T01:17:30","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:17:30","modified_gmt":"2010-12-14T01:17:30","slug":"rotate-text","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/rotate-text\/","title":{"rendered":"rotate text"},"content":{"rendered":"\n<p>I first stumbled across <a href=\"http:\/\/snook.ca\/archives\/html_and_css\/css-text-rotation\">Jonathan Snook&#8217;s post on rotating text<\/a>, but then I found this <a href=\"http:\/\/www.thecssninja.com\/css\/real-text-rotation-with-css\">CSS Ninja post that adds a nice bit to Snook&#8217;s implementation<\/a> (be sure to read all the way through to see all the variations and options).<\/p>\n<h2>The Options<\/h2>\n<ul>\n<li>\n<h3><a href=\"internet-explorer-filters\">Internet Explorer Filters<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Pure, valid CSS, no JS, no HTC, no tricks, no hacks!<\/li>\n<li>IE8 offers vendor prefix (-ms).<\/li>\n<li>IE6\/7 use non-proprietary <code>filter<\/code>, so can easily put that into IE-only stylesheet.<\/li>\n<li>For better or worse, IE6, 7, and 8 are pretty stable as they are, and so it is pretty easy to know which does, and doesn&#8217;t, do what.<\/li>\n<li>Easy to target specific browser versions if using HTML5 Boilerplate <code>&lt;head&gt;<\/code> conditional comments.<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>Fairly limited set of <code>filter<\/code>s, and most look pretty crappy.<\/li>\n<li><code>filter<\/code> is invalid, so stylesheets will not validate, if you care about that.<\/li>\n<li>At least one more line of CSS for each feature&#8230;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The Bottom-Line<\/h2>\n<p>As much of a pain as it was to have to manually determine all the layout, with IE Filters going uncontested in this bout, it is a fairly easy decision&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I first stumbled across Jonathan Snook&#8217;s post on rotating text, but then I found this CSS Ninja post that adds a nice bit to Snook&#8217;s implementation (be sure to read all the way through to see all the variations and &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/rotate-text\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}