CSS3 グラデーションが簡単に作れるジェネレーターまとめ

美しいグラデーションが簡単に作れちゃうジェネレーターまとめ。
グラデーションの書き方は、ブラウザによってちょい違うので覚えにくい…。

基本の書き方は以下になります。

/* Firefox */
background: -moz-linear-gradient(開始位置, 色 位置, 色 位置, ・・・);
/* Chrom と Safari */
background: -webkit-gradient(linear, 開始位置, 終了位置, from(開始位置の色), to(終了位置の色));
/* 共通 */
background: linear-gradient(開始位置, 色 位置, 色 位置, ・・・);

上記を参考に実際に位置指定やカラーコードを当てはめて記述するとこうなります。

/* Firefox */
background: -moz-linear-gradient(top center, #fff 0%, #999 100%);
/* Chrom と Safari */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#999));
/* 共通 */
background: linear-gradient(top center, #fff 0%, #999 100%);

DEMO

上記のようにグラデーションを指定する場合は、記述が長くて色々面倒なので、Web上で確認しながら簡単にグラデーションが作れるジェネレーターをまとめてみました。

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

CSS3 GENERATOR

http://www.css3.me/

CSS3 Gradient Generator

http://gradients.glrzad.com/

CSS 3.0 MAKER

http://css3maker.com/※webkit系のコードのみ生成できます。

Color reminder

http://coloreminder.com/※自分でグラデーションを作る際に近似色のカラーコードを調べることが出来るツール

Comments

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です