jQuery Flat Shadow

JavaScript

フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグイン「jQuery Flat Shadow」をご紹介します。フラットデザインにもう一手間加えたいといった時にとてもよさそうですね。以下は使い方です。

[ads_center]

使い方

実際にサンプルを作って試してみましたが、とても簡単にフラットデザインに影をつけることができます。

jQuery Flat Shadow

こんな感じであっという間に実装することができます。

使い方は、head内にjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.flatshadow.js"></script>

続いてHTMLを記述していきます。flat-iconというクラス名を付与します。

<div class="flat-icon"> A </div>
<div class="flat-icon"> B </div>
<div class="flat-icon"> C </div>
<div class="flat-icon"> D </div>

あとはセレクタを指定してプラグインをセットすればOKです。

$(document).ready(function(){
    $(".flat-icon").flatshadow({
        fade: true
    });
});

CSSでflat-iconというクラス名を弄って基本となるデザインをカスタマイズすることができます。

オプションも色々あり、背景色やシャドウの角度、またはシャドウのカラーなんかを指定することができます。

$(".flat-icon").flatshadow({
    color: "#2ecc71", // 背景色
    angle: "SE", // シャドウの角度
    fade: true, // グラデーションシャドウのエフェクト
    boxShadow: "#d7cfb9" // シャドウのカラー
});

ということで、フラットデザインに影をつけたい時に覚えておきたいですね。

詳細は以下からどうぞ。

関連記事

  1. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  2. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  3. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  4. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  5. Jquery modal box plugin
  6. Parallax Slider with jQuery

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP