画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だｗ

これはちょっと面白いｗ画像を使わず、
cssとjQueryだけで顔文字を作ってしま
ったみたいです。発想が単純だったの
でうまく応用出来れば楽しいものが出来
あがりそうな予感もしますな。面白い
事考える人がいますね・・ｗ

CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ

JQuery CSS Emoticons

一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。

からくり

こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。

:Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。

コード

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

  <script type="text/javascript">
    $(document).ready(function(){
      $('.comment').emoticonize({
        //delay: 800,
        //animate: false,
        //exclude: 'pre, code, .no-emoticons'
      });
    })
  </script>

本体とプラグインやcssを読み込んで、pre内では使わない等、必要に応じて設定します。

マークアップ

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

便宜上大文字にしてあります。実装↓

画像でもいいけど、これはこれでちょっと面白いかもですねｗ以下でデモとスクリプトのダウンロードが可能です。

JQuery CSS Emoticons Plugin / デモ