23

1ページのポートフォリオを作っています。サイトのコンテンツは横スクロール可能で、メニューのみ固定です。最初の 2 ページは黒で、最後の 1 ページは白です。しかし、3 ページ目は半分が黒で半分が白で、2 つの背景の区切りのようなものです。

http://i.stack.imgur.com/uiVqu.jpg

これは、これまでのところ私の質問に対する最良の解決策です:http: //jsfiddle.net/a5a7x/1/ 私はそれを垂直ではなく水平にするだけの問題があります。

これは、分割を配置するページ コンテンツです: http://jsfiddle.net/n3FGr/

覚えておいてください、メニューを分割するだけで済みます。これは修正されるためです。したがって、コンテンツが左右にスライドすると、メニューのみが分割されます。

4

3 に答える 3

6

Quick&Dirty かなり近いソリューション

テキストのグラデーション

私はあなたの目標を達成する方法を探り、いくつかの実験を行いました:

完全な解決策はありませんが、結果はかなり良いです:( dabbletのデモ)

HTML:

<div>
    <h1>Chess</h1>
</div>

CSS: 

div {
    background: linear-gradient(45deg, black 52%, white 52%);
}

ul {
    background: linear-gradient(45deg, white 52%, black 52%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

仕事の方法:

各グラデーションのパーセントを同期します。

52%: ここに画像の説明を入力
62%: ここに画像の説明を入力

長所：

  • プレーン html&css;

短所：

  • Webkit サポートのみ。

キャンバスの方法

長所：

  • クロスブラウザー (モバイルも)

短所：

  • Javascript が必要

SVG方式_

長所：

  • クロスブラウザ
  • Javascript フリー (静的)
  • Canvas よりセマンティック
于 2012-07-26T11:25:10.720 に答える
1

css3 で 50% の黒と 51% の白で斜めのグラデーションを作成できませんでしたか?

background-image: linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -o-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -moz-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -webkit-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);
background-image: -ms-linear-gradient(left top, rgb(0,0,0) 54%, rgb(255,255,255) 55%);

background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.54, rgb(0,0,0)),
color-stop(0.55, rgb(255,255,255))
);
于 2012-07-23T23:57:25.790 に答える
1

メニュー項目の onclick の CSS カラーを変更するのはどうですか:

$('#link1 a').click(function(){
    goTo(0,0);
$('#navigation ul li a').css('color','#fff');  
});


$('#link2 a').click(function(){
    goTo(1,0);
$('#navigation ul li a').css('color','#fff');
});

$('#link3 a').click(function(){
    goTo(2,0);
$('#navigation ul li a').css('color','#000');
});

$('#link4 a').click(function(){
    goTo(3,0);
$('#navigation ul li a').css('color','#000');
});

JSFIDDLE: http://jsfiddle.net/V7YXC/2/

于 2012-07-24T00:04:45.713 に答える