Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 17, 2008

2 Comments

Turn that frown right side up

by in Uncategorized on November 17, 2008 @ 9:25 pm

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:

  1. $(document)
  2. .ready(function(){
  3.     $('p').each(function(){
  4.         var jqthis = $(this);
  5.         var txt = jqthis.html().replace(/\B(:\)|;\)|>:\(|:O|:S|:\/)/g, '<span class="icon">$1</span>');
  6.         jqthis.html( txt );
  7.     });
  8. });

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:

  1. <style>
  2. .icon{
  3.    -webkit-transform: rotate(90deg);
  4.    color:#ff0000;
  5.    display:inline-block;
  6.    padding:0 2px;
  7. }
  8. </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.

back to beginning of this post back to skip to links

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

2 Responses to “Turn that frown right side up”

It’s also interesting to note that you need to take the angle of the italics into account when calculating your rotation angle…

@Tim good call, I looked at it but it did not register that it was slanted more. I’ll try to get that fixed tonight.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

69 queries. 0.431 seconds. Powered by WordPress visitor stats