CSSの「CSShake」プラグインを使用してみました。
「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。

「CSShake」

ライセンスはMITライセンスです。

使用方法はとても簡単で「CSShake」プラグインを読み込み、
シェイクさせたい要素にクラスを設定するだけです。

指定するのは要素でも画像でもOKです。

下記にCSSの「CSShake」プラグインを使用して、指定した要素をぶるぶると振えさせた時の方法をメモします。

■ CSShakeの使用方法

下記URLより、「CSShake」プラグインをダウンロードします。
一番下にダウンロードのボタンがあります。

http://elrumordelaluz.github.io/csshake/

ダウンロードしたCSSを読み込み、ぶるぶる振えさせたい要素にクラスを設定します。

【読み込むファイル】

<link rel="stylesheet" type="text/css" href="csshake.css" />

【HTML】

「CSShake」を使用する要素に「class=”shake”」を記述します。

<div class="shake">test</div>

imgタグに設置する場合

<img src="test.png" class="shake" />

クラスの指定を変更すれば、動きを変更することが可能です。

CSSでぶるぶると動きを出せるのは面白いですね。

クリックさせたいものなどに「CSShake」を設置しぶるぶると動かしてみると、
クリック率などがもしかしたら上がるかもしれないです。

強調させたい時など使うと良いかもしれないですね。

CSSだけで簡単なツールチップを作成しました。

WEBサイト内の説明を書く場合などにツールチップを利用することがあります。
管理画面などでは項目ごとにどのような機能かを説明したりと便利です。

jQueryなどでもツールチップを作成することができますが、
今回はCSSのみで簡単なツールチップ（吹き出し）を作成する方法をメモします。

■ CSSでツールチップ（吹き出し）を作成

・テキストリンクにツールチップを付ける場合

【CSS】

<style type="text/css">
a.tooltip span {
    display: none;
    width: 200px;
    padding: 5px;
    margin: 10px 0 0 -10px;
}
a.tooltip:hover span{
    display: inline; 
    position: absolute; 
    border: 1px solid #CCC; 
    border-radius: 5px;
    background: #F7F7F7;
    color: #666;
    font-size: 12px;
    line-height: 1.6em;
}
</style>

【HTML】

<a href="#" class="tooltip">
テキストリンク<span>説明を書きます。<br />説明を書きます。説明を書きます。</span>
</a>

【表示例】

・画像にツールチップを付ける場合

【CSS】

<style type="text/css">
a.tooltip span {
    display: none;
    width: 200px;
    padding: 5px;
    margin: 10px 0 0 -10px;
}
a.tooltip:hover span{
    display: inline; 
    position: absolute; 
    border: 1px solid #CCC; 
    border-radius: 5px;
    background: #F7F7F7;
    color: #666;
    font-size: 12px;
    line-height: 1.6em;
}
</style>

【HTML】

<a href="#" class="tooltip">
<img src="hatena.jpg" /><span>説明を書きます。<br />説明を書きます。説明を書きます。</span>
</a>

【表示例】