creatersnest130

グラデーションはもう難しくない!CSS3のソースを生成してくれるツールまとめ


見出しやテキストのシャドウなどによく使われる「グラデーション」。
平坦で単調なデザインに彩りや立体感を与えてくれるグラデーションは、
公開されているほとんどのホームページで使用されています。

しかし、いざ自分でコードを書くとなると、
ブラウザによってコードのかき分けをしないといけなかったり、
カラーコードやRGAの数値の微調整が面倒だったり、
意外と面倒くさいし時間が掛かると思ったことはありませんか?

そこで今回は簡単にCSSグラデーション用のコードを
生成してくれるジェネレーターを紹介します。

Generateur de multi-colonnes en CSS3
Generateur de multi-colonnes en CSS3

http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html
カラムを自由に生成できるマルチカラムに対応したジェネレーターです。

 

CSS3 Playground
スクリーンショット 2015-05-31 23.04.29

http://css3.mikeplate.com/
グラデーションだけではなくテキストシャドウやトランスフォームなど、
複数のプロパティを同時に指定することができます。

 

CSS CornersCSS Corners

http://csscorners.com/
Boxの丸角とグラデーションに特化したジェネレーターです。
丸角の数値入力が直感的でわかりやすく、
初心者でも簡単にボタンのCSSを作成することができます。

 

CSS3 Generator – By Eric Hoffman & Peter Funk
CSS Corners

http://www.css3.me/
開始色と終了色しか選択できませんが、
丸角の角度やボックスシャドウ、透明度などがスライドバーを動かすだけで調整できます。

 

Ultimate CSS Gradient Generator

スクリーンショット 2015-05-31 23.10.49
http://www.colorzilla.com/gradient-editor/
グラデージョンパターンが複数用意されているため、
好きなデザインを選択し、色の調整をするだけで
Photoshopで作成したようなグラデーションバーを実装するこができます。
自分がカスタマイズしたパターンをセーブすることも可能です。
(IE9にも対応)

Grad3
スクリーンショット 2015-05-31 23.11.56

http://grad3.ecoloniq.jp/
複数のグラデーションパターンが色ごと用意されているので、
作成したい系統の色とパターンを選択するだけで
実用的なグラデーションを作成することができます。
グラデーション以外のテキストシャドウやフォントサイズも手入力で同時に調整可能です。

 

CSS3 Gradient Generator
CSS3 Gradient Generator

http://www.css3factory.com/linear-gradients/
グラデーションの方向を細かく指定することができるジェネレーターです。

 

Layer Styles Builder
Layer Styles Builder

http://layerstyles.org/builder.html
Photoshopレイヤースタイルのように
ボックスシャドウやグラデーション、透明度などが設定できます。

 

CSS3.0 Maker 
CSS3.0 Maker

http://www.css3maker.com/
グラデーションだけではなく、
アニメーションやトランスフォームのプロパティなども作成することができます。

 

SVG Gradient Background Maker
スクリーンショット 2015-05-31 23.16.30

http://ie.microsoft.com/TEStdrive/Graphics/SVGGradientBackgroundMaker/Default.html
カラーコードを2色選ぶだけで
簡単にグラデーションを作成することができます。
IE9でもグラデーションを表現できるコードを吐き出してくれます。

 

Color reminder
Color reminder

http://coloreminder.com/
自分でグラデーションを作る際に近似色のカラーコードや
RGBを調べることが出来るツールです。
ジェネレーターと合わせて使用すると、
さらに簡単にグラデーションが実装できます。

 

まとめ
いかがだったでしょうか?
海外のものが多いですが、どのジェネレーターも直感的に操作することができ、
複数ブラウザ対応のコードを吐き出してくれるので、
誰でも簡単にグラデーションを実装することができます。

CSSだけで表現できる幅が増えてきています。
グラデーションなどを利用して、
よりおしゃれで見やすいwebデザインを作成してみましょう!

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマートフォンサイトを見やすいデザインにするために気を付けたいことまとめ