CSS3 の概要 gradient_html/css_WEB-ITnose

今日は食事に行って、食後にちょっとしたプレゼントを渡すイベントを開催しました。ギフト自体には言及する価値はありません。重要なのはグラデーションです。この記事ではこのグラデーション効果を紹介し、実際に作っていきます。

Gradient 勾配は、linear-gradient (線形勾配) と radial-gradient (放射状勾配) に分けられます。 。

線形グラデーション

W3C 標準構文: Linear-gradient(angle, color… color);。最初のパラメータはグラデーションの方向を指定します。0 度はグラデーションが下から上であることを意味し、90 度はグラデーションが左から右であることを意味し、180 度はグラデーションが上から下であることを意味し、270 度はグラデーションが右から左であることを意味します。実際には、時計回りに円を描くように歩くことを意味します。 to + キーワードを使用することもできます。たとえば、上が 0 度、右が 90 度、下が 180 度、左が 270 度です。 2 番目のパラメータは開始色、中間に複数の色を指定でき、グラデーションは連続しており、最後のパラメータは終了色です。権限については、W3C を参照してください

まず単純なものを見てみましょう。白から黒への 2 色だけのグラデーションです。図 1 コード Linear-gradient(0deg, #fff, #000); または Linear-gradient(to top, #fff, #000);、コードは表のタイトルに従って推測されます。百聞は一見に如かずです。 🎜>

新しいブラウザーでは W3C 標準構文を使用しても問題ありませんが、古いバージョンではまだ W3C 標準構文をサポートしていない可能性があります。この場合、各ブラウザ独自の構文。もちろん、ページがこれらの下位バージョンのブラウザーをサポートし続ける予定がない場合は、この段落をスキップできます。

Webkit エンジン (Chrome および Safari)、Genko エンジン (Firefox)、Presto エンジン (Opera)、および Trident エンジン (IE) のプライベート構文は、W3C 標準構文と非常によく似ています。違いは次のとおりです。

は接頭辞として付ける必要があります。これは、-webkit-、-moz-、-ms-
-webkit-、の最初のパラメーターのキーです。 -ms- はそれぞれ開始位置を示すため、 を追加する必要はありません。たとえば、 -webkit-linear-gradient(top, #fff, #000); は、linear-gradient(tobottom, #fff, #000);
-moz- の W3C 標準構文と同等です。最初の各パラメータのキーワードは to なしで追加できます。を追加しない場合は開始位置を示し、～を追加する場合は終了位置を示します。たとえば、-moz-linear-gradient(top, #fff, #000); は、-moz-linear-gradient(tobottom, #fff, #000);
IE10 以前と同等です。グラデーションをサポート ...プライベート構文はありません
Opera は 37 からサポートしています。試してみましたが、プライベート構文はありません。-o- プレフィックスを追加しても認識されません...

さらに、Webkit エンジン (Chrome と古いバージョンの Safari は古いプライベート構文もサポートしています。つまり、古いバージョンの Webkit エンジンを搭載したブラウザーには 2 つのプライベート構文があります。)古い構文: -webkit-gradient(type, point, point, color, color)。最初のパラメーター タイプは、線形の線形グラデーションまたは放射状のグラデーションを指定します。 2 番目と 3 番目のパラメータは、それぞれ勾配の開始点座標と終了点座標です。 4 番目と 5 番目のパラメーターは、開始色と終了色を表すカラーストップ関数です。 color-stop() は 2 つのパラメータをサポートします。1 つ目はポイントの位置で、2 つ目は色です。たとえば、color-stop(0.5, #fff) は、グラデーションの中心に黒色の遷移色があることを意味します。範囲。詳細については、ここを参照してください。

長さを減らすために、以下では引き続き W3C 標準構文の紹介に焦点を当てます。

上の例は 2 つの色のグラデーションです。次に、複数の色の間のグラデーションを指定してみます。たとえば、linear-gradient(tobottom, yellow, #9C117A, #EF137A, #f00);

上記で指定した 4 つの色は、等しい割合のグラデーションです。ただし、場合によっては、グラデーションの割合を自分で制御する必要があり、色の後に % パーセンテージを追加することができます。たとえば、linear-gradient(tobottom, yellow 0%, #9C117A 20%, #EF137A 80%, #f00 100%); 最初の色は 0%、2 番目の色は 20%、3 番目の色は 0% です。 80% では、最後の色は 100% になります。

放射状グラデーション

線形グラデーションは直線に沿ったグラデーションであり、放射状グラデーションは円形または楕円形のグラデーションです。もう少し複雑です。

W3C 標準構文:radial-gradient(position, Shape, size, color-stop);

最初のパラメータは位置のサイズです。 size は水平方向と垂直方向の半径を指定します。 Position は円の中心位置を指定します。デフォルト値の center は、要素の中心がグラデーション円の中心であることを示します。上、右、下、左で指定することもできます。また、px 値または % パーセンテージをカスタマイズすることもできます。対応関係は次のとおりです。

の大きさと位置はatで繋がっています。たとえば、中心 20px 50px は、要素の中心点を円の中心、水平方向の半径を 20px、垂直方向の半径を 50px とする楕円形のグラデーションを意味します。具体的な効果は、以下の図の 1 行目と 2 行目に示されています。

2 番目のパラメータのサイズ形状。形状は円または楕円に設定できます。名前を見ると、前者は円形のグラデーションを表し、後者は楕円形のグラデーションを表していることがわかります。

形状が円に設定されている場合、サイズの px 値は円の半径になりますが、% パーセンテージは使用できません。たとえば、40 ピクセルの円は、半径 40 ピクセルの円形グラデーションを表します。

形状が楕円に設定されている場合、サイズの値はそれぞれ楕円の水平方向の半径と垂直方向の半径です。 % パーセントを使用できます。たとえば、30% 80% ellipse は、水平半径 30% (要素の幅に対して)、垂直半径 80% (要素の高さに対して) の楕円グラデーションを表します。具体的な効果は、以下の図の 3 行目に示されています。

最初の 2 つのパラメータは、位置でサイズ形状に組み合わせることができます。たとえば、右の 100px 60px の楕円は、円の中心が右中央にあり、水平方向の半径が 100px、垂直方向の半径が 60px の楕円形のグラデーションを表します。効果は以下のセル 9 に示されています。

px 値または % パーセンテージの設定に加えて、上記のサイズには、最も近い側、最も近いコーナー、最も遠い側、最も遠いコーナー (デフォルト値) という事前定義されたキーワードもあります。たとえば、デフォルト値の farthest-corner は、グラデーション半径が円の中心から円の中心から最も遠い角までであることを意味します。効果は、以下の図の 4 行目のセルに示されています。

4 番目のパラメーター color-stop() 関数は線形グラデーションで導入されているため、詳細は説明しません。

レンダリングは次のとおりです:

Multi-color gradient

上記のグラデーションはすべて開始色と終了色の 2 色のみが設定されています。実際、複数の色を設定して、複数色のグラデーション効果を実現できます。たとえば、左の画像の線形グラデーションは日の出の効果をシミュレートし、右の画像の放射状グラデーションは太陽をシミュレートします。純粋な CSS 実装。PS の痕跡はありません。

//左图日出background-image: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);//右图太阳background-image: radial-gradient(circle,red,orange,#071B26);

グラデーションの繰り返し

CSS3 より前では、背景画像にグラデーションを繰り返したい場合は、背景-繰り返しですが、線形グラデーションが繰り返される場合に限定されます。放射状グラデーションは繰り返されません。 CSS3 は、繰り返しグラデーションを簡単に実装するために、repeat-linear-gradient および testing-radial-gradient を提供します。例:

//重复线性渐变background-image: repeating-linear-gradient(red,green 40px, orange 80px);//重复径向渐变background-image: repeating-radial-gradient(black 10px,black 20px,#2a2a2a 30px,#2a2a2a 40px);

互換性

現在、グラデーションは多くのブラウザーで良好に動作しますが、一部のローエンド ブラウザーでは問題が発生する可能性があります。互換性の問題。私のアドバイスは、それらを捨てることです。ローエンドのブラウザは今年生き残ることはできません。また、グラデーションはあくまでも段階的な強化であり、たとえグラデーション効果がなくても、ユーザーの実際の使用に影響を与えることはありません。

しかし、世の中ではブラウザのシェアや進歩的な機能強化についてカバや顧客に説明するのがどれほど面倒なことか想像してみてください。それに、わかる人は説明する必要がない、わからない人は説明する必要がないことはよくわかっています。したがって、グラデーション効果をシミュレートするには、次の解決策を検討できます。

1. 最も簡単な方法は、画像を直接 PS することです。ただし、HTTP リクエストがもう 1 つありますが、言わなければ誰にもわかりません^。 _^
2. PIE スクリプトなどのスクリプトを使用します。ただし、HTML の構造は JS を通じて調整されるため、特に配置に関してはバグのデバッグが非常に面倒です。
3. ローエンド IE 用のフィルターを使用する

概要

小さなギフトの実際のアイコン (色) をシミュレートするには、決して初心を忘れてはいけません。利用できない場合があります) から完全に一致するまで):

.priv_icon_coupon {    width: 70px;    height: 70px;    border-radius: 0.3em;    border:3px solid #fff;    background-image: linear-gradient(to bottom, #EF137A, #9C117A);    font: 50px/64px "微软雅黑";    color: #fff;    text-align: center;    text-shadow: 0 1px rgba(0,0,0,.5);}<span class="priv_icon_coupon">禮</span>

Lea Verou