CSS3線形グラデーション[CSS3のヒント]
勾配 CSS3のすばらしい色機能追加です。単色だけを追加するのではなく、画像に頼らずに1つの宣言ブロックに複数の色の組み合わせを追加できるようになりました。.
CSS3でグラデーションを使ったことがあれば、おそらく放射状グラデーションと線形グラデーションの2つの方法に精通しているでしょう。今日の記事は後者についてです.
グラデーションを作成する
仕様がCSS3のグラデーションは画像であると言っているように、それは他の新機能追加のような特別な性質を持たないので、それはを使用して宣言されます。 背景画像 代わりにプロパティ.
グラデーションの完全な構文を見ると、ちょっとだけ見えます。 行き過ぎた, 一部の人にとって混乱を招く可能性があります.
div background-image：-webkit-linear-gradient（top、＃FF5A00 0％、＃FFAE00 100％）;背景画像：−ｍｏｚ−線形勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：−ｍｓ−線形 - 勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：-o-linear-gradient（上、＃FF5A00 0％、＃FFAE00 100％）。背景画像：線形勾配（上、＃FF5A00 0％、＃FFAE00 100％）。
それで、物事をより明確にするために構文の各部分を一つずつ掘り下げましょう。.
まず最初に、線形勾配は次のように宣言されます。 線形勾配（） 関数。この関数には3つの主要な値があります。最初の値はグラデーションの開始位置を定義します。以下のようなわかりやすいキーワードを使用できます。 上 からグラディエントフローを開始する 上;
div 背景画像：線形グラデーション（top、＃FF5A00、＃FFAE00）;
上記のスニペットは、グラデーションを作成するためのW3Cの公式バージョンです。それは実際にはより単純で、かなり一目瞭然です、そしてそれはまた以下のグラデーションを作成します.
また使用することができます 底 反対のことをする 右 そして 左.
斜めのグラデーションを作成することもできます。 角度度 グラデーションの開始位置として。これが一例です。
div 背景画像：線形勾配（45度、＃FF5A00、＃FFAE00）;
上記のスニペットは、次の色のグラデーションを作成します。
関数の2番目の値は 最初の色 情報とその 停止位置 これはパーセントで示されています。停止位置は実際にはオプションです。ブラウザは適切な位置を決定するのに十分賢いので、最初の色の停止を指定しない場合、ブラウザはそれを行います。 0％ デフォルトとして.
そして、次の価値は セカンドカラー 組み合わせ。最後の色が適用されている場合にのみ前の値と同じように機能します。 停止位置, の値 100％ がデフォルトとして使用されます。それでは、以下の例を見てみましょう。
div 背景画像：線形グラデーション（上、＃FF5A00 0％、＃FFAE00 100％）;
上のスニペットは先ほど見たようなグラデーションを作成します（違いはありません）が、今度は色の停止位置を指定します。
それでは、 カラーストップ, 今回は指定します 50％ 最初の色の 51％ 2番目の色については、そしてそれがどのように判明するか見てみましょう。
div 背景画像：線形グラデーション（上段、＃FF5A00 50％、＃FFAE00 51％）;
透明度
作成 透明度 グラデーションでも可能です。効果を生み出すためには、色を変換する必要があります。 ヘックス に RGBA アルファチャンネルをモードにして下げる.
div background-image：線形グラデーション（top、rgba（255,90,0,0.2）、rgb（255,174,0,0.2））;
上のスニペットは色の濃さを 20％, そしてグラデーションは次のようになります。
複数の色
色を追加したい場合は、色をカンマ区切りで隣同士に追加し、ブラウザに各色の停止位置を決定させてください。.
div 背景画像：線形グラデーション（上、赤、オレンジ、黄色、緑、青、藍、紫）;
上のスニペットは次のような虹を作ります。.
ブラウザの互換性
残念ながら、これを書いている時点では、現在のブラウザはすべて標準の構文をまだサポートしていません。彼らはまだベンダープレフィックスを必要とします（-ウェブキット-, -モズ-, -ミズ- そして -○-）そのため、完全な構文は次のようになります。
div background-image：-webkit-linear-gradient（top、＃FF5A00 0％、＃FFAE00 100％）;背景画像：−ｍｏｚ−線形勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：−ｍｓ−線形 - 勾配（上、＃ＦＦ５Ａ００ ０％、＃ＦＦＡＥ００ １００％）。背景画像：-o-linear-gradient（上、＃FF5A00 0％、＃FFAE00 100％）。背景画像：線形勾配（上、＃FF5A00 0％、＃FFAE00 100％）。
一方、Internet Explorer、具体的にはバージョン9以下は、標準からかけ離れています。グラデーション IE9 以下は以下のように宣言されています。 フィルタ, そのため、これらのブラウザにグラデーションを追加したい場合は、次のように書く必要があります。
div filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃FF5A00、endColorstr =＃FFAE00）;
の フィルタ 限界があります。まず、3色以上の色の追加は許可されていません。また、透明効果の作成も少し厄介です - 許可されていません。 RGBA, しかし、IE フィルタ 用途 #ARGB;
div filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃33FF5A00、endColorstr =＃33FFAE00）;
これはあなたが変換するのを助けるためのツールです RGBA に #ARGB.
- デモ
- ソースをダウンロード
構文の高速化
あなたが上で見ることができるように、ブラウザを渡って勾配の互換性を維持するために、我々は非効率的なコードをさらに5行追加する必要があります。.
タスクを単純化するためにできることはたくさんあります。コードのコンパイルにはPrefix-free、Prefixr、LESS、Sassなどを使用しますが、とりわけColorZilla Gradientを使用することをお勧めします。このツールは、グラデーションがすべてのブラウザで機能するために必要なすべてのコードを単純に生成します。.
最後の言葉
今日はグラデーションの作成、構文の各部分、透明効果の作成、ブラウザの互換性の維持について詳しく説明しました。だから、この時点で、私たちはあなたがすでにその主題についてもっとよく理解していることを願っています.
まだ検討していることがたくさんあります CSS3グラデーション 今後の投稿では、Hongkiat.comをぜひご覧ください。最後に、この記事を読んでくれてありがとう、私たちはあなたがそれを楽しんだことを願っています.
参考文献
- 防弾クロスブラウザRGBAの背景 - Lea Verou
- CSS3画像 - W3.org
- CSS3グラデーションはいつ使用できますか - CanIUse.com
