高さが固定されている要素を考慮しない場合、このような効果を作成すると、レイアウト設計者にかなりの困難が生じます。 実装の重要なポイントはグラフィックスの最適化ですが、一方で、過度にピンチされたファイルは品質を失います。これは、高さが固定されていない要素を使用する場合に特に顕著です。 しかし、ページの背景でグラデーション効果を使用する必要がある場合はどうでしょうか？
目的：グラデーションをページの背景として使用する2つの方法を検討します。
グラデーションの背景だけでなく、ページの最初から最後まで色を滑らかに変えるグラフィック要素を含む背景の実装を検討したいと思います。
これはページの背景です。
したがって、実装の一般的な考え方は、背景全体をいくつかのレイヤーに分割することです
最初のレイヤーは、美しいスタジオの名前を持つパターンです。
2番目のレイヤーはグラデーションそのものです。
3番目はドキュメントの本文です。
別のレイヤーが写真にありません。これはサイトのコンテンツを含むレイヤーで、最上位のレイヤーですが、興味はありません。
実装の一般的なアイデアがあれば、詳細に行くことができます。
最初のステップは、最初のレイヤーのグラフィックを準備することです。 png-24形式でphotoshopに保存し、 punypngサービスを使用して画像を最適化します。 私の場合、元のファイルは47 ％圧縮されていました。 IE6について少し説明します。事実、最適化されたファイルを使用すると、画像の半透明ピクセルが切り取られ、碑文の「壊れた」エッジが残ります。 サードパーティのスクリプトでは希望する結果が得られなかったため、アルファチャネルのない別の画像を用意しました。 実装の2番目の例では、必要ありません。
このステップは一般的で、次は勾配を作成することです。この時点からの実装には2つのオプションがあります。
オプション1
ラスターグラフィックスを使用して2番目のレイヤーを実装します。 この例では、1x100ピクセルのpng8ファイルを作成し、目的のグラデーション（オレンジからライトグリーン）を使用します。 ファイルサイズは465バイトでした。
グラフィックを準備したら、テストページですべてを収集する必要があります。
コードは単純で、メインレイヤーはその中の要素の数から引き伸ばされ、グラデーションとフィルターの高さはメインブロックの高さの100％の値を取ります<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="ru" >
< head >
< meta content ="text/html; charset=utf-8" http-equiv ="Content-Type" />
< style type ="text/css" >
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; color: #fff; }
.all, .content { position: relative; z-index: 1; }
.gradient { position: absolute; top: 0; left: 0; z-index: 0 }
.filter { position: absolute; z-index: 0; width: 100%; height: 100%; background: transparent url(artsofte.png) repeat scroll top left; }
</ style >
<!--[if IE 6]>
<style type="text/css">
.filter { background: transparent url(artsofte2.png) repeat scroll top left; }
.gradient, .filter { height: expression( parseFloat(this.parentNode.offsetHeight)); }
</style>
<![endif]-->
< title ></ title >
</ head >
< body >
< div class ="all" >
< img class ="gradient" src ="background.png" width ="100%" height ="100%" alt ="" />
< div class ="filter" ></ div >
< div class ="content" >
<!-- -->
</ div >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
-最後に、スタイルを別のファイルに入れずに4つのファイルが判明しました。
残念ながら、IE 6のハッキングなしではうまくいきませんでした。興味のある読者の一人が、より簡単な方法を提案することに興味を示してくれたら感謝します。
それまでの間、私が提案した解決策から、タスクが単純ではないことは明らかです。
IEのフィルターの1つを思い出してください。これにより、DirectXを使用してレイヤーをグラデーションで塗りつぶすことができます。
例：
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, enabled='true', startColorStr='#00458E', endColorStr='#DA251D')
* This source code was highlighted with Source Code Highlighter .
もちろん、このプロパティの有効性を考慮する必要はありません。式を使用する場合、100％の検証について話すことはできませんが、速度について話す価値はあります。 フィルタには常により多くのリソースが必要です。 この例でフィルタを使用すると、使用メモリが4 mb増加しました。 また、ブラウザウィンドウのサイズを変更すると、CPUの負荷が画像よりも10％多くなりました。
注釈
実装中に、私は多くの不快な瞬間に出くわしました。それについて順番に説明します。
-私が最初に出会ったのは、ブラウザの「ブレーキング」です。これは、グラデーションで画像を引き伸ばしているためです。 ブラウザは、サイズ1x100の拡大画像を滑らかにします。 画像のサイズを大きくすると、速度の向上に気づくことができますが、それでも「ブレーキ」が発生します。
-2つ目はue6の動作です。別の画像を描画し、CSSエクスプレッションを使用する必要がありました。
-私の意見で別の不快な瞬間は、ページの背景を強調する可能性です。
-グラデーションのこの実装で最も重要なのは画像の読み込み順序です。グラデーションの読み込みが速くなると、ユーザーには一瞬だけグラデーションが表示され、効果は非常に不快になり、グラデーションは非常に明るくなり、ページが常に点滅してバグのあるサイトの印象を与えます。 確かに、グラデーションのみを使用することについて話している場合、そのような問題は発生しないと想定できます。
最終的な目標が達成されたという事実にもかかわらず、同様の効果には比較的高いコストが必要でしたが、これは空白ページにすぎず、そのようなコストが正当化されるかどうかは1つの効果のみであることを忘れないでください、全体としては特定のケースに依存すると思います
オプション2
画像とレイヤーの助けを借りてグラデーション背景を実装する落とし穴を見つけたので、プロジェクトでベクターグラフィックスを最近使用し始めたという事実に注目したいと思います。
SVG（Scalable Vector Graphics）とVML（Vector Markup Language）であるベクターグラフィックスを記述するために2つの言語に焦点を当てます
IE用のベクターグラフィックスの接続
ブラウザがデータをVMLプロセッサに転送する方法を決定するには、名前空間とグラフィック表示パラメーターを決定する必要があります。IE6-7の名前空間は、次の行をヘッドセクションに接続することによって決定されます。
< xml:namespace ns ="urn:schemas-microsoft-com:vml" prefix ="v" />
* This source code was highlighted with Source Code Highlighter .
この情報は、vmlプロセッサへのさらなる転送と処理のために、接頭辞v：を持つxml要素を分析することにより、名前空間「urn：schemas-microsoft-com：vml」を使用する必要があることをブラウザに伝えます。
IE8で名前空間を接続するには、この行を追加する必要があります
<? import namespace ="v" implementation ="#default#VML" ? >
* This source code was highlighted with Source Code Highlighter .
次に、cssに行を追加するだけで表示オプションを説明します。使用するすべてのvmlプリミティブを説明する必要がある別のvml.cssファイルがあります。この例では、この行に限定します。
v\:vmlframe { behavior:url(#default#VML); display: block; width: 100%; min-height: 100%; position: absolute; }
* This source code was highlighted with Source Code Highlighter .
IE6用
v\:vmlframe { height: 100%; }
* This source code was highlighted with Source Code Highlighter .
IEでは、vmlは標準のアドインです。 上記のすべてのコードがその中でのみ機能するように、条件付きコメントを使用します。
SVGとの競合を避けるために、CSSに関連するすべての要素を隠す行を追加します。
.svg { display: none; }
* This source code was highlighted with Source Code Highlighter .
描画
vml要素については詳しく説明しません。必要な情報はすべて仕様書に記載されています。 以下のコードはvectors.vmlに保存する必要があります
< xml xmlns:v ="urn:schemas-microsoft-com:vml" >
<!-- group -->
< v:group id ="bg" style ="width: 100%; height: 100%" >
<!-- -->
< v:rect style ="position: absolute; width: 100%; height: 100%;" >
< v:fill type ="gradient" angle ="0" color ="#D0E805" color2 ="#E88A05" ></ v:fill >
</ v:rect >
<!-- -->
< v:rect style ="position: absolute; width: 100%; height: 100%;" >
< v:fill type ="tile" src ="artsofte.png" ></ v:fill >
</ v:rect >
</ v:group >
</ xml >
* This source code was highlighted with Source Code Highlighter .
注：すべてのベクトル画像は1つのファイルに保存でき、必要に応じて、表示する画像を一意の識別子を使用して示すため、VMLは便利な言語のように思えました。
写真の準備ができたので、それを接続する必要があります。これはv：vmlframe要素を使用して行うことができます。誰もが名前でその目的を理解したと思います。条件付きコメントを使用してページに実装します。 このような接続は便利に思えるかもしれませんが、残念なことにこの場合にのみ、次の記事でこの接続方法は機能しないと言います。
このようなネストにより、IE6でcss式を使用できなくなり、ブラウザーのパフォーマンスが節約されます。<!--[if IE]><v:vmlframe clip="true" src="vct/background.vml#bg" class="vml"><![endif]-->
< div class ="content" >
</ div >
<!--[if IE]></v:vmlframe><![endif]-->
* This source code was highlighted with Source Code Highlighter .
Mozilla、Opera、Safari、Chrome、Arora、Avantのベクターグラフィックスを接続します。
SVGの接続ははるかに簡単です。このため、object要素を使用して、外部ファイルとグラフィックスの説明を接続する必要があります。
< object class ="svg" type ="image/svg+xml" data ="background.svg" width ="100%" height ="100%" ></ object >
* This source code was highlighted with Source Code Highlighter .
指定されたMIMEタイプを使用します。
この例をさまざまなブラウザーでテストしているときに、Safariの機能に出会いました。 たとえば、ページを読み込むときにウィンドウが800x600だった場合、ウィンドウのサイズを変更すると（たとえば1024x768）、背景サイズは同じままなので、Safariのソリューションを探す必要があり、すぐに見つかりました。
なぜなら JavaScriptを使用してSVG要素を制御できます。Safariの小さなスクリプトは、ウィンドウのサイズが変更されたときに背景のサイズを非常に適切に変更できます。 このブラウザでのみスクリプトが機能するには、devicePixelRatioプロパティのウィンドウオブジェクトのサポートを確認する必要があります。
以下はすべてのbackground.svgファイルのコードです。
<? xml version ="1.0" encoding ="utf-8" standalone ="yes" ? >
< svg version = "1.1"
baseProfile ="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height ="100%" width ="100%" >
< script type ="text/ecmascript" ><! [CDATA[
function resize() {
document.getElementById('rect').setAttribute("width", "100%");
document.getElementById('rect').setAttribute("height", "100%");
document.getElementById('rect2').setAttribute("width", "100%");
document.getElementById('rect2').setAttribute("height", "100%");
}
if(window.devicePixelRatio) { window.onresize = resize }
]] ></ script >
< defs >
< linearGradient id ="OrangeToGreen" x1 ="0%" y1 ="0%" x2 ="0%" y2 ="100%" >
< stop offset ="0%" style ="stop-color: #E88A05" ></ stop >
< stop offset ="100%" style ="stop-color: #D0E805" ></ stop >
</ linearGradient >
< pattern id ="artsofte" patternUnits ="userSpaceOnUse" x ="0" y ="0" width ="200" height ="200" >
< image x ="0" y ="0" width ="200" height ="200" xlink:href ="artsofte.png" />
</ pattern >
</ defs >
< rect id ="rect" rx ="0" ry ="0" x ="0" y ="0" width ="100%" height ="100%" fill ="url(#OrangeToGreen)" style ="fill-opacity: 1; stroke: #E4E4E4; stroke-width: 1;" />
< rect id ="rect2" rx ="0" ry ="0" x ="0" y ="0" width ="100%" height ="100%" fill ="url(#artsofte)" style ="fill-opacity: 1; stroke: #E4E4E4; stroke-width: 1;" />
</ svg >
* This source code was highlighted with Source Code Highlighter .
SVGはVML言語に基づいていたため、それらの間にはある程度の類似性があります。オブジェクトのすべてのプロパティは、VML言語とは異なり、オブジェクト自体ではなく、特別な<defs>セクションで記述され、その後の使用はそれらの識別子を介して実行されることに注意してください。
ベクトル描画の説明の後、テストページをマークアウトできます。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="ru" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
< title > </ title >
< style type ="text/css" >
* { margin: 0; padding: 0; }
html { height: 100%; }
body { position: relative; background-color: #7E0A0A; color: #808080; min-height: 100%; _height: 100% }
body:after { display: block; content: "."; clear: both; font-size: 0; } /* */
.content { position: relative; /* */ }
.svg { position: absolute; z-index: -1; }
</ style >
<!--[if IE]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<?import namespace="v" implementation="#default#VML" ?>
<style type="text/css">
/*<!CDATA[[*/
v\:vmlframe { behavior:url(#default#VML); display: block; width: 100%; min-height: 100%; _height: 100%; position: absolute; }
.svg { display: none; }
/*]]>*/
</style>
<![endif]-->
</ head >
< body >
< object class ="svg" type ="image/svg+xml" data ="background.svg" width ="100%" height ="100%" ></ object >
<!--[if IE]><v:vmlframe clip="true" src="vectors.vml#bg" class="vml"><![endif]-->
< div class ="content" >
<!-- -->
</ div >
<!--[if IE]></v:vmlframe><![endif]-->
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
そのため、CSSスタイルのない合計4つのファイルが別のファイルにあります。
長所と短所：
-IEの欠点は、背景を完全にハイライトする機能にあります。
-大きなファイルサイズ グラフィックはXML形式で記述されます。 SVG形式は圧縮された形式で存在しますが、残念ながら、これまでのところ私に対する疑問は未解決のままです。 確かに、このバージョンではファイルサイズは既に大きくありません。
-Safariのスクリプトを使用します。
+この方法は、別のプロジェクトに簡単に移行できます。グラデーション自体も簡単に変更できます。これはすべて、グラフィカルエディターを使用せずに実行できます。
+最初のオプションとは異なり、ページの「点滅」はありません。 SVGファイルは、完全に読み取られるまで表示されません。 場合によっては、これはマイナスに起因する可能性があります。
+アルファチャンネルなしでalpha6の画像を準備する必要はありません。 VMLは透明性を理解し、さらにcss式を取り除きました。
+このオプションは完全に有効です。
+ページごとに3つの要素を使用（最初の4つ）
...長所と短所はまだ追加できると思います。
結論として
結果の違いはコメントなしで見えると思います。 非常に多くの作業が行われましたが、それでも私はSVGとVMLの使用のいくつかの側面を強調しませんでした。 たとえば、VMLを使用すると、Internet Explorerがページをブロックし、誰かが混乱します。 1番目と2番目のオプションによっては、ブラウザのパフォーマンスのトピックが完全に公開されていません。 もちろん、どちらの場合も実装に問題のある場所がありますが、私の意見では、2番目のオプションの使用はより大きな成果を上げています。
改善点だけでなく、設計におけるそのような効果の重要性に関するトピックに関するコメントを見るのも興味深いです。
すぐに使用可能な例