built and supported by Alfa Jango


visit alfajango.com » « view all open source projects

CSS Emoticons


Pure CSS/JS Emoticons

An emoticon implementation in pure CSS and JavaScript, using no images whatsoever.

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).

The result is great-looking emoticons that leave the text exactly as written (so that the text emoticons actually get copied and pasted with the text if you select a block of text from the page). This uses the CSS3 properties, transform, border-radius, box-shadow, gradient, and transition (when supported).

Because the pure-CSS emoticon stylesheet uses CSS3 properties such as border-radius and transform, it is supported by FireFox, Chrome, Safari, and Opera. They also work (animations and all) on the iPhone and Android phone browsers. In Internet Explorer, emoticons will simply appear as the original textual emoticons.

Demo

Hi, this is a great plugin! :-)

The Markup

<div class="comment">
  Hi, this is a great plugin! :-)
</div>

Required Files

<link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/jquery.cssemoticons.js" type="text/javascript"></script>

The JS

$('.comment').emoticonize();

Options

There are three optional parameters.

Option Description Values
animate Animates the emoticons on page-load and when you hover over them to show you the transition from the original text to the stylized emoticon. To see this animation effect, view the demo with Chrome or Safari. true | false
(default: true)
delay Allows you to set how long the browser waits (in milliseconds) before styling up the emoticons (which makes the animation stand out more, otherwise it happens too quickly and loses some of its effect). integer (in milliseconds)
(default: 500)
exclude Allows you to exclude elements from being emoticonized using CSS selectors. any jQuery CSS selector(s)
(default: 'pre, code, .no-emoticons')

Unemoticonize

If for some reason, you’d like to “unemoticonize” any of your elements, well there’s a function for that.

$('.comment').unemoticonize();

I'd write more documentation, but really that's all there is to it. Enjoy!

More demos

It's a pirate ?-) ARGHHH!!!! :)

^^ I made this one up, but it's my plugin so it's supported ^^

Click here to toggle the "emoticonization" of the headline above.

Yo, this is some tiny text. :-)
This is how emoticons stack up in a paragraph B)

:O Here is an example of what emoticons look like in a paragraph :-) You can tell here that the emoticons don't break the line-height (in most browsers) in paragraphs like most of the image-replacement methods. Also, here is a printed URL: http://www.alfajango.com. Notice the :/ doesn't get styled. And one in a nested element :-)

This entire paragraph is excluded from being emoticonized ;-)

This paragraph has specific elements excluded. So this works B) But this doesn't :(

Here are all of the emoticons currently supported (though it's easy to add your own): ) :-) :) :o) :c) :^) :-D :-( :-9 ;-) :-P :-p :-Þ :-b :-O :-/ :-X :-# :'( B-) 8-) :-\ ;*( :-* :] :> =] =) 8) :} :D 8D XD xD =D :( :< :[ :{ =( ;) ;] ;D :P :p =P =p :b :Þ :O 8O :/ =/ :S :# :X B) O:)

And some special emoticons: <3 ;( >:) >;) >:( O_o O_O o_o 0_o T_T ^_^ ?-) [+=..]