「CSS3実戦」ノート グラデーションデザイン(3)_html/css_WEB-ITnose

書籍「CSS3 Practical Combat」を読んで勉強することによるまとめ
「CSS3 Practical Combat」/Cheng Lin. - 北京機械工業新聞 2011.5

IE ブラウザ エンジンの CSS グラデーション実装方法

IE はサポートしていませんCSS グラデーションですが、単純なグラデーション効果を実現するために使用できるグラデーション フィルターが提供されています。

基本構文

filter：progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,strartColorStr=iWidth,endColorStr=iWidth)

このパラメータのパラメータ説明は次のとおりです:

enabled: フィルタがアクティブ化されているかどうかを設定または取得します。 true および false を含むオプションのブール値。デフォルト値は true で、アクティブ化ステータスを示します。

startColor: カラー グラデーションの開始色と透明度を設定または取得します。 #AARRGGBB 形式のオプション。 AA、RR、GG、BB は 16 進数の正の整数で、値の範囲は 00 ～ FF です。 RR は赤色の値を指定し、GG は緑色の値を指定し、BB は青色の値を指定し、AA は透明度を指定します。00 は完全に透明で、FF は完全に不透明です。値の範囲外の値はデフォルト値に戻ります。値の範囲は #FF0000 ～ #FFFFFF で、デフォルト値は #FF0000FF (不透明な青) です。

EndColorStr: カラー グラデーションの終了色と透明度を設定または取得します。デフォルト値は #FF000000 で、不透明な黒です。

IEグラデーションフィルターの実践的な応用

IEフィルターを使用してグラデーションの背景をデザインし、背景画像を使用してグラフィックやテキストのイラスト効果をデザインします。

コード:

すごい

デモ効果:

W3C 標準化された CSS グラデーション実装メソッド

評価すべき 25 のグラデーション背景 Web デザイン ケース

標準ドラフトは、 Gecko エンジン: http://dev.w3.org/csswg/css3-images/#gradients