鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!

サイトの構成によって鮮やかな色やパターンを背景に使いたいという場合があると思います。そんな時に便利なのが今回紹介するサイトです。

CSS Gradients with background-blend-mode

使い方

このサイトの使い方ですがとても簡単です。好きなデザインの下のCSSの部分をクリックするとCSSのコードが表示されるのでコピーしてそのまま使えます。

また、このコードを使って色合いなどを変えることによってオリジナルのデザインを作ることも可能です。

CSSボタンをクリックして拡大表示をし、その場でコードを変更してプレビューしながら編集することも可能です。

デフォルト表示

デフォルト表示

コード変更後の表示

コード変更後の表示

当然、その変更したコードをコピーして使う事も出来ます。

サンプルの種類

このサイトはサンプルを全部で21個用意していて好きなデザインを選ぶ事が出来ます。

サンプルの種類

サンプルは全部で21種類

いろんなタイプの背景を選べるのでうまく使っていきたいですね。

最後に

なかなか時間が無いときやデザインを探しているときなどに簡単に作れるツールは有効に使っていきましょう。

今回、紹介したサイトをリンクしておきますので参考にして下さい。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
ワードプレステーマを変更せずにCSSを追加・管理する方法
Bootstrapを採用しているhtmlテンプレート&テーマ
webデザインのグリッドレイアウト作成に使える無料ツール
レスポンシブwebサイトを構築するためのポイント「viewport」とは
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
デザイン全般で使えるweb色見本
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
表示しながらCSSの編集が出来るFirebugの使い方
これは便利!グラデーションが簡単に作れるCSSジェネレーター
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」

Menu

HOME

 TOP