Hacer degradado en background

dpbataller · #1 (**permalink**) 28/08/2010, 09:39

Hola artistas! realizando la maquetación de un proyecto, me surge la siguiente duda que paso a detallaros.

Me gustaria saber como hacer con css para que el bakground de mi página principal quede mas o menos como la de www.tuenti.com (por ejemplo).

En mi caso, la imágen es la siguiente:

El problema lo tengo a lo hora de recortar la imágen en photoshop, ya que si corto tanto por la izquierda como por la derecha, como hago para que al hacer el repeat salga la luz del centro, no se me explico.
Gracias, alguién puede guiarme?

tredio · #2 (**permalink**) 28/08/2010, 10:50

la imagen que se muestra en el link que pones es de 1x1000 px. y la repiten en x.

tu imagen la podrias tratar de centrar en el background, con la propiedad background-position:center, no se realmente como te quede, pero puedes probar.

dpbataller · #3 (**permalink**) 28/08/2010, 10:59

es que ahí viene mi duda, por que cuando cambie de resolución no se verá afectada la imagen? lo correcto no seria recortarla con una altura y un ancho determinado y hacer que se repita? de ser así, como deberia recortar la imagen?

Wasper · #4 (**permalink**) 28/08/2010, 11:01

Cita:

Iniciado por tredio

la imagen que se muestra en el link que pones es de 1x1000 px. y la repiten en x.

tu imagen la podrias tratar de centrar en el background, con la propiedad background-position:center, no se realmente como te quede, pero puedes probar.

el problema es que no se trata de un degradado lineal, si no radial, en este caso no te vale hacerlo 1x1000 repetido en x...

lo que deberias hacer es crear el diseño del fondo de AxB... el degradado terminara con un color solido al final del diseño, por ejemplo #aaa en lados y bajo, el degradado deberias de mantenerlo pegado arriba... en el div de AxB pones el background y en el body pones el color final del backgroud, por ejemplo, #aaa

Edito: viend la imagen ahora en photoshop, los colores del ultimo pixel de cada lado son variados, por los que sera complicado hacerlo como te digo...

Otra solucion algo mas tosca es imagen grande de 2000x2000 px por ejemplo y mostrar solo una porcion de la imagen, colocas este backgound en el body directamente...

dpbataller · #5 (**permalink**) 28/08/2010, 11:06

Efictamente, el degradado es radial!!! me parece que esta solución me puede ser muy útil, pero perdona mi más que posible inexpericia para poder entender los terminos con los que me hablas! :)

AxB? toda tu explicación signfica que debo modificar el degradado a nivel de photoshop o me estás hablando ya de css?

tredio · #6 (**permalink**) 28/08/2010, 11:27

Cita:

Iniciado por Wasper

el problema es que no se trata de un degradado lineal, si no radial, en este caso no te vale hacerlo 1x1000 repetido en x...

si yo entiendo, solo le mencionaba como estaba hecho en la pagina que el nos proporciono.

como dices lo que mas podria acercarse a una solucion seria crear una imagen bastante grande y centrarla en el body

Wasper · #7 (**permalink**) 28/08/2010, 11:49

Cita:

Iniciado por tredio

si yo entiendo, solo le mencionaba como estaba hecho en la pagina que el nos proporciono.

como dices lo que mas podria acercarse a una solucion seria crear una imagen bastante grande y centrarla en el body

Entonces debemos esperar a que el usuarios nos diga si desea hacerlo radial o lineal, ya que dependiendo de lo que elijas se tomara un camino para ello...

Si es Lineal como te ha comentado tredio es lo ideal.

Si es Radial:
Crea un index.html y mete esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

</style>
</head>

<body>
</body>
</html>

En el mismo nivel que tienes el archivo index.htm mete esta imagen

La imagen mide 2000 x 2000 px...

La verdad es que hay muchas formas de conseguirlo, pero seria bueno siempre utilizar la mas optimizada, y la verdad, utilizar esta que comento no es muy optima, pero es una posibilidad ademas la imagen pesa 50kb...

Luego decoras con unos Div y pones el logo y las barras separadoras y podras obtener el mismo diseño que tienes ahora.

dpbataller · #8 (**permalink**) 28/08/2010, 13:03

Voy a probar y os comento, muchas gracias wasper y tredio por la ayuda!!!! de veras, ahh!! el error ha sido mio por no comentar lo del degradado lineal!

dpbataller · #9 (**permalink**) 28/08/2010, 13:10

¡¡Ok!! la solución propuesta es francamente buena, me vale 100% (al menos de momento), pero tengo algunas preguntas

-¿El fondo lo has diseñado tu verdad, el tamaño de 2000x2000 es por algo especial?
-¿Debo hacer el degradado lineal de alguna forma en especial?
-¿Notas tu también como unos medias circurferencias que van desde la parte izquierda hacia la derecha y de arriba abajo, es que no lo llego a notar unfirme 100%?
no se si son cosas mias...

gracias!

Wasper · #10 (**permalink**) 28/08/2010, 16:15

Cita:

-¿El fondo lo has diseñado tu verdad, el tamaño de 2000x2000 es por algo especial?

Si lo he diseñado yo. Y como una imagen vale mas que 1000 palabras ahi te dejo para que lo entiendas. Por supuesto las resoluciones de pantalla de 3000x3000, si no me equivoco aun no estan presentes, esto es un ejemplo a lo exagerado

Cita:

Debo hacer el degradado lineal de alguna forma en especial?

Si es degradado lineal, tan solo creas en el programa de dibujo un lienzo de 1x1000 px, le haces el degradado deseado y despues en el body por CSS le dices que background:url(tu imagen) repeat-x

Cita:

-¿Notas tu también como unos medias circurferencias que van desde la parte izquierda hacia la derecha y de arriba abajo, es que no lo llego a notar unfirme 100%?

Eso es debido a que he hecho un JPG con 80% de calidad y los degradados en JPG si le bajas la calidad se nota mucho esas porciones solidas de las que hablas, tan solo creas el degradado y no le reduzcas la calidad.

dpbataller · #11 (**permalink**) 29/08/2010, 09:31

Bueno, la verdad es que después de leer esto no tengo más que agracederte el tiempo que has tomado conmigo! ha sido una explicación al grano y muy claro!me ha quedado bastante más claro que hace un dia!

Tomare tus indicaciones para mis proyectos!

¡1000 gracias!