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

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

CSS Gradients with background-blend-mode

使い方

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

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

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

デフォルト表示

デフォルト表示

コード変更後の表示

コード変更後の表示

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

サンプルの種類

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

サンプルの種類

サンプルは全部で21種類

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

最後に

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

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

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

コメントを残す




関連記事

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

Menu

HOME

 TOP