CSS3のGradientがよくわからんという人は「CSS3 Gradient Generator」を利用すると便利[CSS]

CSS3 Gradient Generatorについては、有名なブログでも紹介されていたので、ここで紹介するまでもないと思いますが、敢えて改めて紹介させていただきます。

Gradientとは

Gradientを簡単に説明すると、画像ファイルを一切使用せずにCSSのみでグラデーション定義することができるCSS3のプロパティです。

2010年5月現在では、Firefox3.6、Google Chrome5と4、Safari4でサポートされています。

参考:Web Design - HTML5 & CSS3 Checklist

といっても、上記サポートしているブラウザでも、-moz--webkit-などの接頭辞でのサポートになっています。

Gradientのややこしい点のひとつが、Gecko系とWebKit系で記述が異なることです。ちなみに下記になります。

  • -webkit-gradient
  • -moz-linear-gradient

さらに、使い方の記述をすると・・・・

-moz-linear-gradient(top, #CC3333, #FF6600);
-webkit-gradient(linear, left top, left bottom, from(#CC3333), to(#FF6600));

一見、WebKit系のほうは記述量が多くてややこしそうに見え、Gecko系の記述がシンプルで覚えやすいと思います。

しかし、実際にはそうで使え慣れてなくて当たり前なのですが、慣れていないとさっぱりわからなくなると思います。

そして、ちょっと僕が、Gradientを使ったときに頭が混乱して、最終的にCSS3 Gradient Generatorを利用して解決したので、そういう人は、このジェネレータを利用すると簡単にGradientを定義できるので、ぜひ活用してください。

Gradientをより勉強したいという方は、下記サイトに詳しく書かれていますので、非常にわかりやすいです。