designWeb全般webmasterデザインメモTOPWebデザインCSSCSS3を使ってグラデーションを作成グラデーションの表現もCSS3ならば色や方向、位置を指定するだけで簡単に作成することができます。これならば、今まで画像を用意してそれをCSSで背景画像を指定して表現するよりも時間と手間が省け、ファイルサイズも軽くなりメリットがあります。線形グラデーションの表現(縦方向)まずは、linear-gradientというプロパティを使って縦方向のグラデーションを作成してみます。記述の仕方はmozilla系のブラウザとwebkit系のブラウザで少し指定方法が違います。中間色の位置,終了色)」、webkit系の場合は、「-webkit-gradient(linear,開始位置,終了位置,from(開始色),color-stop(中間色の位置,中間色),to(終了色))」のように指定をします。終了色)」といった感じでベンダープレフィックスなしの記述をします。中間色の指定はより細かいグラデーションを表現したい場合に指定するものなので、単純なグラデーションならば開始と終了の指定だけで十分です。#006400);}線形グラデーションの表現(横方向)今度は、横方向にグラデーションをかけてみます。縦方向の場合と同じく、線形なのでlinear-gradientプロパティを使い、開始位置の指定を変えるだけです。左上から右下へグラデーションをかけてみます。#006400);}放射状グラデーションの表現radial-gradientというプロパティを使えば、放射状のグラデーションも表現することができます。#006400);}中間色をいくつか追加すると波紋のようなグラデーションも作ることができます。今回は、中心から外に広がっていくグラデーションの指定をしましたが、開始位置の設定などを細かく指定してあげるといろいろなグラデーションの装飾ができるので試してみてください。サイト上にもグラデーションを作成できるジェネレーターがいくつか存在するので、そういったツールを利用するのも便利です。Generatorもその1つで、Photoshopなどと同じようにカラーピッカーで色や位置、透明度を設定すると、それに合わせてCSSの指定が生成されるので、それをコピペするだけで利用することができます。