CSS3 Easy Gradation Editor

a2d93f

73a220

CSS3 Easy Gradation Editor "Grad2"

Prefix

  • Safari
  • Chrome
  • Firefox
  • Opera
  • IE
  • W3C

Click to Select this Code !

Drag me!

font-size

up

down

color

color:

border-width

up

down

border-style

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset

border-color

border-color:

text-shadow-color

text-shadow-color:

closeColorPicker

CSS3のグラデーションを簡単に。

Opera最新バージョン、 IE10PP対応版になりました。

CSS3グラデーションに対して、Opera 11から直線のみ、Internet Explolerは10から遂に対応します。
IE以外のメジャーブラウザは最新版が全て直線グラデーションに対応したという事になります、そろそろ準備をしておきましょう。

使い方は簡単。

パネルはドラッグで移動できます

パネルをドラッグするための説明
カラーピッカーが邪魔な場合は、パネルの上あたりを握ってドラッグすることができます。
邪魔にならない場所によけておきながら作業をしましょう。

まず、イメージに近いグラデーションのサンプルをクリック

サムネイルをクリック
最初からグラデーションを作っていくのは大変。
ここではまずアナタが思い描いたグラデーションに近いものを探してください。多分、それなりに近いものはあると思います。
見つかったらクリック!すると、ページ上のスライダーやボタンのサンプル、さらに一瞬でコードが生成されました!

気に入るまでスライダーで微調整

スライダーをダブルクリック
だいたい近いイメージのグラデーションが見つかったら、そのまま使ってもらっても構いません。
でも、微調整したいことってありますよね?
そんな時にスライダーを上下に動かしてみてください、コードもちゃんと変わっています。もちろん見本ボタンの色も。
カラーピッカーを触ってみてください、ちゃんと見本ボタンの色も変わりますね?

もしもスライダーを削除したいときは?

スライダーを左にドラッグして削除
Photoshopなどを思い出してください、スライダーを下にドラッグしたら削除できますよね?
Grad2では、縦グラデーションなので、左にドラッグするとそのスライダーが削除されるように設計しました。

ベンダープレフィックスも欲しいものだけに絞れます

スライダーを左にドラッグして削除
各ベンダープレフィックスを付けないとブラウザ上ではちゃんと表示してくれません。
ベンダープレフィックス無しまでGrad2ではコードを生成することも可能です。
でも、実際使うときは、ベンダープレフィックス無しだったり、IE10用のコードを使うのはまだ現実的じゃないって事もあると思います。
新機能として、ブラウザを選ぶ事ができます。
コードが生成される場所の上に小さいアイコンがありますよね?それを押して、コードの表示、非表示を切り替えます。
例えばベンダープレフィックス無しとIE10用のコードは必要ない場合、IE10W3Cのアイコンを押して暗い状態にしてください。その分のコードが表示されなくなりました。
もう一度押せばちゃんと復活します。

コードをコピーしましょう

スライダーを左にドラッグして削除
コードをコピーします。「Click to Select this Code !」の文字をクリックしたら、コードを全部選んでくれます。
ただし、コピーを忘れないでくださいね。

サンプル

HTML側ではこのように書きます。

<a href="#">CSS3 Gradient Buttons!</a>

CSSではこう書きましょう。

a {
display: inline-block;
padding: 10px 20px;
line-height: 1;
border-radius: 5px;
border: 1px solid #6CF;
text-decoration: none;
text-shadow: 1px 1px 2px #fff;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #033;
font-size: 22px;
ここに、Grad2でコピーしたコードを貼付けます。
}

完成です。

コピーしてブラウザで見た結果

2012.03.24 Grad3 is Out!

http://grad3.ecoloniq.jp/

CLOSE