2

Web ページのメニューのデザインを実装しようとしていますが、行き詰っています。

コンセプトは次のとおりです。メニューとコンテンツ コンテナの 2 つの縦列があります。メニューの背景は、白から灰色への線形グラデーションです。コンテンツの背景は、グレーから白への線形の背景です。メニューには、可変高さのナビゲーション リストが含まれています。ナビゲーション アイテムが選択されると、その横にあるコンテンツ コンテナーの色と調和する背景が使用されます。

ここに私が何を意味するかを示す画像があります：

ここに画像の説明を入力

制約は次のとおりです。

  • メニューの一部の要素は、拡大または縮小できます。いつもメニューの大きさがわからない

  • 要素の数は変更できます

  • しかし、正確なグラデーションの色は変わりません

  • ウェブページ・コンテンツエリア全体の高さが分からない

  • 選択されていないメニュー項目は、ナビゲーション コンテナーのグラデーションに溶け込む必要はありません。

CSSだけでこれを行うことは可能ですか？クリップ プロパティをいじってみましたが、要素とその中のテキストを完全に配置する必要がありました。いくつあるか分からないので、これはできません。制約に適合するものは思いつきません。

編集: 選択されていないメニュー項目を白のままにして、メニュー要素が終了した後に白から灰色へのグラデーションを開始するようにデザインを変更できます。しかし、列の高さが異なる可能性があるため、これを行う方法がわかりません。

4

4 に答える 4

4

ul全体の背景を設定すると、単一のulの背景を再び透明にすることはできません。したがって、すべてのliに適用し、次のように設定する必要がありbackground-attachmentますfixed。

ul li{
   background: -webkit-linear-gradient(top, red 0%, blue 100%);
   background: -moz-linear-gradient(top, red 0%, blue 100%);
   background-attachment: fixed;
}

これが実装されていることを示すJSFiddleを作成しました。

http://jsfiddle.net/kLD98/1/

li.spaceまだ完璧ではない、をご覧ください。グラデーションはすでによく見えていると思うので、誰か他の人がこれを修正するアイデアを持っているかもしれません。

付録：@Bergisのコメントと彼の添付のJSFiddle（http://jsfiddle.net/kLD98/9/）を見てください。これは使用の必要性をli.space脇に置いています。

于 2012-05-15T11:08:57.397 に答える
0

絶対的な測定なしでは不可能だと思います。要素に背景があると、純粋な CSS のサブ要素のために透明な穴を開けられません。

于 2012-05-15T10:36:10.983 に答える
-1

これは、Chris による CSS グラデーションに関する素晴らしい記事です。

http://css-tricks.com/css3-gradients/

于 2012-05-15T10:35:07.150 に答える