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

    数多くのUIエレメントを検索することができる「UICloud」

    たくさんのUIエレメントを検索することができる「UICloud」がとて…

  2. Web Service

    文字はいらない!Webサイトを画像だけで楽しむことができるブックマークレット「Wordless We…

    おもしろいブックマークレットがあったのでご紹介します。Webサイト上に…

  3. HTML特殊文字変換ツール

    Web Service

    テキスト内のHTML特殊文字を変換してくれる便利なツール

    テキスト内にあるHTML特殊文字を変換してくれる便利なツールがあったの…

  4. Web Service

    ノイズの入ったテクスチャを簡単に作成してくれるジェネレーター「Noise Texture Gener…

    ノイズが入ったテクスチャをとても簡単に作成することができるジェネレータ…

  5. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  6. Web Service

    iPhoneでコピペを多用する人に便利なクリップボード履歴が分かるアプリ「Clipboard Man…

    個人的にとても便利すぎるアプリがあったのでご紹介します。iPhoneの…

最近の記事

  1. スターバックス ハウスブレンド
  2. Anker PowerHouse 100
  3. ミニミニ温度計(シルバー)

アーカイブ

PAGE TOP