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

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  2. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  3. Flickerplate
  4. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  5. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP