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" // シャドウのカラー
});

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

詳細は以下からどうぞ。

レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」前のページ

Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」次のページNivo Lightbox

関連記事

  1. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  4. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  5. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  6. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP