| « Best Cell Phone Case Holder Protector Ever | Top Secret New Apple Gadget Unveiled - The iPad mini! » |
CSS Mirror Text Code Perfected: The Example
February 7, 2010
CSS Mirror Text Code Perfected: The Example
Quite a few April Fool’s Days ago, I shocked a lot of people by making my entire blog look like it was being reflected through a mirror. Everything on the site was mirror-imaged, reversed, text as well as images. It looked great!
It was a heck of an April Fool’s Day prank and boy did it looked fantastic; I couldn’t have been more pleased with the effect and people’s reactions. That day, I posted that I had managed to perfect what I called the CSS Mirror Text code. Unfortunately, however I never got around to posting said code. And over the years I’ve noticed I get a ton of hits from people looking for that code here, too and for that I must apologize. I intend to set the matter to rights.
So without further ado or adonts, it’s time to set right omissions of the past.
First, the code that made reversing my site possible:
direction: rtl;
unicode-bidi:bidi-override;
These 2 css statements tell the page that any text is to be displayed from right to left (instead of left to right) which of course gives the mirrored look we’re looking for in text generated by a web page. To get this to work for the blog, I had to put these 2 CSS statements anywhere text would be generated such as body, headers, posts, titles, etc.
To complete the effect that fun April Fool’s Day, I reversed all my images on the front page. Sadly, there is no CSS code in the world for reversing images, so you have to do that one manually.
The effort pays off though, it makes a killer April Fool’s prank, let me tell you.
Enjoy. And see you next April Fool’s…
No feedback yet
Comment feed for this postComments are closed for this post.
