WebGradients

Web Service

CSSやPNG形式に対応した180種類のグラデーションを活用できる「WebGradients」

WebGradientsは、180種類ものグラデーションが用意されたコレクションを無料で活用できるWebサービスです。好きなグラデーションのCSSコードをコピーできたり、PNG形式のファイルをダウンロードできたり、またはSketchやPSDによるパックなんかも用意されています。

SketchやPhotoshopのパックもある

WebGradients

WebGradientsへアクセスすると、たくさんのグラデーションがズラズラと並んでいます。全部で180種類のグラデーションがあるので、お気に入りのグラデーションも見つかりやすいでしょう。

各グラデーションの右上には下矢印によるアイコンが表示されていて、ここからPNG形式のファイルをダウンロードできるようになっています。

一方、右下には「Copy CSS」と書かれた部分があり、ここをクリックするとそのグラデーションのCSSコードをコピーできます。CSSファイルなどにそのまま直接ペーストできるので、Web制作の時短にも繋がりますね。

左下には実際に使われているカラーコードも記載されています。

グラデーションの部分にカーソルを合わせると、カーソルが虫眼鏡に切り替わります。この状態でクリックすると、そのグラデーションをフルスクリーンでチェックできます。

再度クリックすると元の一覧画面に戻ります。気になるグラデーションを拡大してじっくり見たいという場合に便利ですね。

また、画面の右上には「.SKETCH」「.PSD」と書かれたボタンがあり、ここからSketch・Photoshop(PSD)形式のコレクションパックもゲットできます。まさに、至れり尽くせりなサービスです。

グラデーションはどれもとっても美しくて、見ているだけでいろんなインスピレーションを受けちゃいますね。というわけで、Web制作に役立つグラデーションコレクション「WebGradients」のご紹介でした。

no-imageオーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」前のページ

画像を元に自動でコンテンツに色付けしたりカラーコードを取得したりできる「Chameleon.js」次のページChameleon.js

関連記事

  1. Web Service

    iPhoneからWordPressの記事を投稿、編集できるアプリ「するぷろ for iPhone」を…

    このブログはワードプレスを使っているのですが、最近iPhoneから直接…

  2. TodaysList

    Web Service

    シンプルで美しいToDoリスト「TodaysList」

    とてもシンプルで美しいToDoリストを発見したのでご紹介します。「To…

  3. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

  4. ブラウザメモ帳

    Web Service

    ブラウザメモ帳がとても便利

    ブラウザメモ帳はブラウザに直接メモが出来る便利なWebサービスです。ブ…

  5. Web Service

    自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」

    PLACEHOLD.ITはWeb製作に役立つダミー画像を生成してくれる…

最近の記事

  1. チャイラテ
  2. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  3. COMOLI ナッピングウールショーツ
  4. 川上庵(麻布十番)牡蠣天せいろ
  5. COMOLI ウールフリースセットアップ
PAGE TOP