Turn that frown right side up
Ok, this is going to be a real quick post, Toby Pitman did a guest post over at CSS-Tricks and it got me thinking what other simple things can be done with the css property “-webkit-transform.” The best I could come up with was to flip those emotional icons upright.
Note: this will only work in WebKit browsers as of this writing so don’t tell me it does not work in IE7 or below or in Firefox 3 or below, I know, it is meant to be a test for WebKit.
So, lets assume you have the following conversation:
You are so cute :)
No, you are ;)
But I said it first >:(
Why are you getting mad :O
I don’t know :S
:/
Great convo right? Not let’s put some JavaScript into the mix here:
- $(document)
- .ready(function(){
- $('p').each(function(){
- var jqthis = $(this);
- var txt = jqthis.html().replace(/\B(:\)|;\)|>:\(|:O|:S|:\/)/g, '<span class="icon">$1</span>');
- jqthis.html( txt );
- });
- });
Basically what that is saying is grab all the paragraphs, grab the HTML out of them. Use some RegEx to search through the characters to find the emotional icons, and then replace them with a SPAN and the characters that are being replaced (that would be the $1).
Now lets add some style to the mix:
- <style>
- .icon{
- -webkit-transform: rotate(90deg);
- color:#ff0000;
- display:inline-block;
- padding:0 2px;
- }
- </style>
And this is what we get:
You are so cute :)
No, you are ;)
But I said it first >:(
Why are you getting mad :O
I don’t know :S
:/
Neat trick, nothing real special, but the possibilities are really beginning to open up.
1. Tim