Изменение цвета меню в одной точке сайта на одной странице

Я делаю одностраничный портфель. Содержимое сайта будет горизонтально прокручиваться, только фиксированное меню. Первые 2 страницы черные, а последний белый. Но третья страница наполовину черная и наполовину белая, она выглядит как разделитель двух фонов.

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

Это лучшее решение для моего вопроса: http://jsfiddle.net/a5a7x/1/ У меня только проблемы, чтобы сделать его горизонтальным, а не вертикальным.

Это содержимое страницы, где я хочу поместить split: http://jsfiddle.net/n3FGr/

Помните, мне нужно только разбить меню, потому что оно будет исправлено, так что только меню будет иметь раздвоение, когда содержимое будет скользить влево и вправо.

Ответы

Ответ 1

Quick & Dirty довольно близкое решение

gradient on text

Я изучил способ достижения вашей цели и провел несколько экспериментов:

У меня нет полного решения, но результат довольно хорош: ( demo on 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%: enter image description here
62%: enter image description here

Плюсы:

  • Обычный html & css;

Минусы:

  • Поддержка только webkit;

Canvas-way

Плюсы:

  • Кросс-браузер (для мобильных устройств)

Минусы:

  • Необходим Javascript

SVG-way

Плюсы:

  • Кросс-браузер
  • Javascript бесплатно (в статическом режиме)
  • Более семантический, затем холст

Ответ 2

Не могли бы вы сделать диагональный градиент в 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))
);

Ответ 3

Как насчет изменения цвета 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/