• かちびと.net

    画像を使わず、CSS+jQueryで作られた絵文字・JQuery CSS Emoticonsがちょっと素敵だwこの発想はちょっと無かったです・・シンプルなので応用できそうですよね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

JQuery CSS Emoticons


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

からくり


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


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

コード

<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>

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

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

JQuery CSS Emoticons Plugin / デモ

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services