28/08/2010, 09:39
| |||
| |||
| 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? |
|
28/08/2010, 10:50
| ||||
| ||||
| 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. |
|
28/08/2010, 10:59
| |||
| |||
| 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? |
|
28/08/2010, 11:01
| ||||
| ||||
| Respuesta: Hacer degradado en background Cita: 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...
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. 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... Última edición por Wasper; 28/08/2010 a las 11:06 |
|
28/08/2010, 11:06
| |||
| |||
| 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? |
|
28/08/2010, 11:27
| ||||
| ||||
| Respuesta: Hacer degradado en background Cita: si yo entiendo, solo le mencionaba como estaba hecho en la pagina que el nos proporciono.
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... como dices lo que mas podria acercarse a una solucion seria crear una imagen bastante grande y centrarla en el body |
|
28/08/2010, 11:49
| ||||
| ||||
| Respuesta: Hacer degradado en background Cita: 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...
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 Si es Lineal como te ha comentado tredio es lo ideal. Si es Radial: Crea un index.html y mete esto: Cita: En el mismo nivel que tienes el archivo index.htm mete esta imagen<!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> 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. |
|
28/08/2010, 13:03
| |||
| |||
| 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! |
|
28/08/2010, 13:10
| |||
| |||
| 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! |
|
28/08/2010, 16:15
| ||||
| ||||
| Respuesta: Hacer degradado en background Cita: 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-¿El fondo lo has diseñado tu verdad, el tamaño de 2000x2000 es por algo especial?  Cita: 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-xDebo hacer el degradado lineal de alguna forma en especial? Cita: 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. -¿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%? |
|
29/08/2010, 09:31
| |||
| |||
| 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: |
