CSS3 の線形グラデーションを理解する

グラデーションを表示するためだけに画像を作成するのは柔軟性が低く、すぐに悪い習慣になる可能性があります。しかし、悲しいことに、この記事を書いている時点ではまだそうしなければならないかもしれませんが、そう長くは続かないことを願っています。 Firefox と Safari/Chrome のおかげで、最小限の労力で強力なグラデーションを実現できるようになりました。この記事では、CSS グラデーションの簡単な実装と、このプロパティが Mozilla ブラウザーと Webkit ブラウザーでどのように異なるかを示します。

PS: この記事の原文にはビデオが掲載されていますが、よく知られている理由により、このビデオを Youtube で視聴することはできません。視聴したい学生は、自分で視聴する方法を見つけてください (最大 720P)。 ://www.youtube.com/watch?v=9D2hyM5SSCE

ウェブキット

Mozilla と Webkit は通常、CSS3 プロパティに同じ構文を採用していますが、残念ながら勾配に関しては一致していません。 Webkit は、次の構造を使用してグラデーションをサポートする最初のブラウザ カーネルです。

/* 構文、http://webkit.org/blog/175/introducing-css-gradients/ から引用 */
-webkit-gradient(<タイプ>, <ポイント> [, <半径>]?, <ポイント> [, <半径>]? [, <ストップ>]*)

/* 実際には... */
背景: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));