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);、コードは表のタイトルに従って推測されます。百聞は一見に如かずです。 🎜>

は接頭辞として付ける必要があります。これは、-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- プレフィックスを追加しても認識されません...

最初の 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