Foros del Web » Creando para Internet » CSS »

Hacer degradado en background

Estas en el tema de Hacer degradado en background en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/08/2010, 10:39
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Hacer degradado en background

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?
  #2 (permalink)  
Antiguo 28/08/2010, 11:50
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: Hacer degradado en background

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.
  #3 (permalink)  
Antiguo 28/08/2010, 11:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Hacer degradado en background

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?
  #4 (permalink)  
Antiguo 28/08/2010, 12:01
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.026
Antigüedad: 11 años, 5 meses
Puntos: 41
Respuesta: Hacer degradado en background

Cita:
Iniciado por tredio Ver Mensaje
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...
__________________
Saludos, Jose

Paginas web cadiz y provincia
Anuncios por palabras

Última edición por Wasper; 28/08/2010 a las 12:06
  #5 (permalink)  
Antiguo 28/08/2010, 12:06
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Hacer degradado en background

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?
  #6 (permalink)  
Antiguo 28/08/2010, 12:27
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: Hacer degradado en background

Cita:
Iniciado por Wasper Ver Mensaje
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
  #7 (permalink)  
Antiguo 28/08/2010, 12:49
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.026
Antigüedad: 11 años, 5 meses
Puntos: 41
Respuesta: Hacer degradado en background

Cita:
Iniciado por tredio Ver Mensaje
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">
<!--
body {
background: url(fondo.jpg) center}
-->
</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.
__________________
Saludos, Jose

Paginas web cadiz y provincia
Anuncios por palabras
  #8 (permalink)  
Antiguo 28/08/2010, 14:03
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Hacer degradado en background

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!
  #9 (permalink)  
Antiguo 28/08/2010, 14:10
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Hacer degradado en background

¡¡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!
  #10 (permalink)  
Antiguo 28/08/2010, 17:15
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.026
Antigüedad: 11 años, 5 meses
Puntos: 41
Respuesta: Hacer degradado en background

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.
__________________
Saludos, Jose

Paginas web cadiz y provincia
Anuncios por palabras
  #11 (permalink)  
Antiguo 29/08/2010, 10:31
 
Fecha de Ingreso: agosto-2009
Mensajes: 134
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Hacer degradado en background

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!

Etiquetas: degradado, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:57.