
Show HN: My Weekend Fun Project - Pure-CSS Emoticons - JangoSteve
http://www.alfajango.com/blog/a-practical-application-for-pure-css-icons-emoticons/
======
JangoSteve
I just needed to unwind this weekend, so I developed a new jQuery plugin /
stylesheet that creates emoticons on any webpage in pure CSS (using a bunch of
CSS3 properties). The benefits of this approach are described in the post
here.

On a side note, I emailed Faruk Ateş (who wrote this post entitled "Pure CSS
Icons: Make The Madness Stop" [1]) to see what he thought, and he said it was
a pretty solid implementation.

One of the things that Faruk (and skatey on IRC) brought up is that one of the
age-old annoyances with inline emoticon replacement in bodies of text
(prevalent in forums) is that they break the line-height of the text. I had to
make the choice for this plugin to either keep the text the right size (and
thus the emoticon a little larger than line-height), or make the actual text
smaller so that the emoticon is exactly line-height. I chose the former, but
upon further reflection, I'll probably change to the latter in the next
release.

[1] [http://farukat.es/journal/2010/08/469-pure-css-icons-make-
ma...](http://farukat.es/journal/2010/08/469-pure-css-icons-make-madness-stop)

EDIT: BTW, here is a direct link to the live demo:
[http://www.alfajango.com/blog/jquery-css-emoticons-
plugin/jq...](http://www.alfajango.com/blog/jquery-css-emoticons-
plugin/jquery-css-emoticons-demo/)

