<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/08/cssgg.jpg" alt="CSS Gradient Editor" title="cssgg" width="514" height="204" class="aligncenter size-full wp-image-15828" /></p><p>見出しや段落などに、クロスブラウザで動作するグラデーションをかけたい時、サイズを合わせた背景画像を用意して、CSSで指定したりとなかなか煩雑ですよね。</p>
<p>そんなグラデーションをCSSでも表現できるわけですが、今回はツールを使ってカンタンにCSSを生成できてしまうものをご紹介します。</p>
<!--more-->
<h3 class='header-label'>CSSのグラデーション加工をカラーピッカーで作れる「CSS Gradient Editor」</h3>
<p>「<a href="http://oga2.opengameart.org/gradient/" target="_blank">CSS Gradient Editor</a>」は、<strong>カラーピッカーで２色のグラデーションを設定すると、CSSを生成してくれるオンラインツール。</strong></p>
<p>今すぐグラデーション背景を作りたい時に、ログインなしでCSSだけでサクっと作れるのが便利です。（※ただしFirefox3.5以前とIEは非対応）</p>

<h4 class='tips'>CSSで背景をグラデーション加工</h4>
<div class="test"><p>この部分にグラデーションのCSSを適用しています。</p><p>画像なしでこういったものが作れるのは便利ですね。</p></div>
<h4 class='tips'>カラーピッカーで色選択</h4>
<p><img src="http://web-marketing.zako.org/images/2010/08/css-ge.png" alt="カラーピッカー" title="css-ge" width="400" height="415" class="aligncenter size-full wp-image-15821" /><br />↑このように、カラーピッカーで2色を選択すると、CSSが生成されます。</p>

<h4 class='tips'>生成されるCSS</h4>
<pre>background: -moz-linear-gradient(rgb(251, 189, 70) 0%, rgb(255, 255, 255) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(251, 189, 70)), color-stop(100%, rgb(255, 255, 255)));</pre>

<p>生成されるCSSは、上記のように裸の状態なので、実際に使う際にはグラデーションをかけたい場所のclassやidを指定して利用します。</p>
<p>ちなみに、このページの例は以下のようなものにしました。</p>

<pre>.test {background: -moz-linear-gradient(rgb(251, 189, 70) 0%, rgb(255, 255, 255) 100%);}

.test {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(251, 189, 70)), color-stop(100%, rgb(255, 255, 255)));}</pre>

<p>それぞれ前に .test { をつけて、後ろに } をつければ良いということですね。</p>

<h5 class='test'>見出しにも使ってみます</h5>
<p>と、このように見出しの背景にもサクっとグラデーション効果を付けることができます。</p>

<p>試してみたい方は<a href="http://oga2.opengameart.org/gradient/" target="_blank">CSS Gradient Editor</a>へどうぞ。</p>
<p>divの入れ子などを駆使すれば、もっと複雑なグラデーションもできるのでしょうけれども、今回のようにシンプルでありながらも、見た目はしっかりグラデがかかっているというものがカンタンに作れてしまうのも良いですね。</p>
<p>Via：<a href="http://delicious.com/url/f2b43696575d86a03e95127a85690add" target="_blank">delicious</a></p>