Transición entre colores de fondo

Un problema que frecuentemente me deja perplejo mientras trabajo en sitios es cómo hacer una transición elegante entre dos colores de fondo diferentes. Por ejemplo, la parte superior de un sitio en el que estoy trabajando tiene un fondo gris mientras que la parte inferior tiene una textura azulada. Esto crea esto:ingrese la descripción de la imagen aquí

Estos dos colores casi se mezclan y el límite entre ellos no es muy frecuente. ¿Hay alguna forma de usar bordes para facilitar esta transición? ¿Ayudaría hacer el gris más oscuro/claro?

Puede obtener mejores respuestas en ux.stackexchange.com

Respuestas (3)

Creo que el primer paso es, como dices, oscurecer o aclarar el gris (lo que creas que se ve mejor). Esto creará más contraste entre los dos colores y evitará que se mezclen tanto. Un ejemplo de esto está abajo, donde oscurecí el gris a #333333:

gris oscuro

También recomiendo agregar algo de resaltado para afinar aún más el borde del área azul, lo que da como resultado estos (variando la y de la línea de resaltado):

borde resaltado

destacado variado

Aquí también está el PSD para que pueda experimentar con los valores de opacidad en las áreas de luces y sombras:

http://dl.dropbox.com/u/12931900/ejemplo.psd

Una técnica que siempre me ha parecido atractiva es un borde verdaderamente definido. Use un color neutro (gris funciona) para hacer un borde diseñado con una sombra debajo. Puedes hacer la imagen desde la parte superior así:

COLOR 1   1111111111111
          1111111111111
EDGE      -------------
SHADOW    ^^^^^^^^^^^^^
          2222222222222
COLOR 2   2222222222222

Haciendo eso 5-10 px de ancho y sin importar la altura que necesites. La parte inferior de su imagen de fondo debe desvanecerse en su color 2, luego en su css:

body{
background-image: url(...);
background-repeat: repeat-y;
background-color: color2;
}

Eso crea un efecto de mosaico en todo el ancho para resoluciones más amplias creando un bonito paisaje 3-D. Lo he usado varias veces con resultados extremadamente favorables.

Haría uno como color de fondo y el otro como una imagen repetida de 1 px de ancho cortada de un color a un degradado transparente. En este caso, probablemente usaría el gris como color de fondo en la hoja de estilo, luego haría un degradado azul a translineal en Photoshop, copiaría, seleccionaría una porción de 1px y la configuraría en mosaico horizontal.

Transición entre colores de fondo
RespuestasAquíPolítica de privacidad1y, 0v