3 ms·
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 p
by JangoSteve 16y ago
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-madness-stop http://farukat.es/journal/2010/08/469-pure-css-icons-make-ma...
EDIT: BTW, here is a direct link to the live demo: http://www.alfajango.com/blog/jquery-css-emoticons-plugin/jquery-css-emoticons-demo/ http://www.alfajango.com/blog/jquery-css-emoticons-plugin/jq...