jquery - formato - twig document

Cambiar el color del menú en un punto del sitio de una página

Question

Estoy haciendo una cartera de una página. El contenido del sitio será desplazable horizontalmente, solo el menú es fijo. Las primeras 2 páginas son negras y la última es blanca. Pero la tercera página es mitad negra y mitad blanca, es un separador de los dos fondos.

Esta es, hasta ahora, la mejor solución para mi pregunta: http://jsfiddle.net/a5a7x/1/ Solo tengo problemas para que sea horizotnal, no vertical.

Este es el contenido de la página donde quiero poner la división: http://jsfiddle.net/n3FGr/

Recuerda, solo necesito dividir el menú, porque será arreglado, por lo que solo el menú tendrá la división, cuando el contenido se deslice hacia la izquierda y hacia la derecha.

Answer 1

¿No podrías hacer un gradiente diagonal en css3 con decir negro por 50% y luego blanco por 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))
);

Answer 2

¿Qué hay de cambiar el color de CSS al hacer clic en el elemento del menú?

$(''#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/

Answer 3

Solución bastante rápida y sucia

He explorado la forma de lograr tu objetivo y tengo algunos experimentos:

• Texto en centro-medio
• Texto en el ángulo superior izquierdo
• Menú en ángulo superior izquierdo
  

No tengo una solución completa, pero el resultado es bastante bueno: ( demo en 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;
}

Método de trabajo:

Sincronizar porcentajes en cada gradiente:

52%:
62%:

Pros:

• Llanura html y css;

Contras:

• Solo soporte de webkit;

The Canvas -way

Pros:

• Cross-browser (también móvil)

Contras:

• Javascript necesario

El SVG -way

Pros:

• Cross-browser
• Javascript gratis (en estático)
• Más semántica que Canvas