Rainbow.js

JavaScript

テキストやボックスをレインボーにグラデーションできるjQueryプラグイン「Rainbow.js」

Rainbow.jsというjQueryプラグインを使ってみました。テキストやボックスを手軽にレインボーにグラデーションすることができます。HTMLのタグ内にカラーなどを設定していくことができるのでわかりやすいですね。以下、使い方です。

[ads_center]

Rainbow.jsの使い方

実際に試してみると、このように簡単にグラデーションのボックスやテキストを作ることができます。

Rainbow.jsの使い方

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="rainbow.js"></script>

あとはHTML側でグラデーションを反映させる要素を作っていくだけです。以下はボックスに適用した例。

<div
    class="square rainbow"
    id="gradient_2"
    data-type="linear"
    data-degrees="45"
    data-color="f1c40f-d35400"
    data-opacity="1"
></div>

縦横サイズはCSSで設定しておきます。

.square {
    width: 200px;
    height: 200px;
}

これだけでボックスを簡単にグラデーションにすることができます。手軽で使いやすいですね。

テキストの場合は以下のように設定します。

<h1
    class="rainbow"
    id="rainText_1"
    data-type="linear"
    data-degrees="0"
    data-color="000-F00"
>サンプルテキスト</h1>

その他にも画像にグラデーションをかけたりなんてこともできるみたいです。複雑なCSSでグラデーションを作るのがめんどくさいと思っている人にはとても便利なプラグインですね。

Rainbow.js

CSSViewer特定の要素のCSSを手軽に確認できるChrome拡張機能「CSSViewer」前のページ

メトロスタイルなSNSアイコンをウィジェットで実装できるWordPressプラグイン「Metro Style Social Widget」次のページ

関連記事

  1. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  2. no-image

    JavaScript

    レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」

    tinyslideはレスポンシブに対応した超軽量なイメージスライダーを…

  3. Responsive Parallax Drag-slider With Transparent Letters
  4. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  5. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  6. How To Create A Simple Image Slideshow

    JavaScript

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP