Tema: ¿Imagen redondeada de fondo con CSS?

[HuanManwe]

Hola,

Llevo toda la tarde buscando en el Google alguna forma de crear un fondo fijo para una página (hasta ahí sí encontré lo que quería) pero que ese fondo sea como un dibujo de bordes redondos (unos más abultados y otros menos). He visto formas de redondear cuadrados, pero el método es usar una imagen creada con photoshop, trocearla y juntarla.

¿No hay forma de hacer que se vea un fondo de página o la propia página con 2 colores distintos (muy claros y difuminados ambos) y que formen un dibujo con varias curvas, pero en CSS? ¿Quizá un fondo de un color y una capa opaca en el lado que va de otro color? ¿Poniendo una raya negra y que lo que quede a la izquierda sea de un color y lo que quede a la derecha de otro?

¿A alguien se le ocurre una solución?

Gracias de antemano. Saludos.

[goldfinger]

Yo no soy ningun experto, pero hace poco que estoy indagando en CSS y lo de los bordes redondeados lo hago según el metodo que comentas, jugando con imagenes de background y con los parametros de posición y repetición..

Como explican aquí: http://www.desarrolloweb.com/articulos/2217.php

¿No hay forma de hacer que se vea un fondo de página o la propia página con 2 colores distintos (muy claros y difuminados ambos) y que formen un dibujo con varias curvas, pero en CSS? ¿Quizá un fondo de un color y una capa opaca en el lado que va de otro color? ¿Poniendo una raya negra y que lo que quede a la izquierda sea de un color y lo que quede a la derecha de otro?

No sé si he entendido muy bien el efecto que buscas pero creo que lo intentaría con un diseño a 2 o 3 columnas y con ese metodo.

Con todo, esperemos a ver si alguien tiene alguna otra solución, un saludo

[HuanManwe]

Muchas gracias por responder.

He visto algún que otro tuto para los bordes redondeados, pero claro, preferiría poder trabajar sólo con CSS y sin imágenes, porque no quiero una imagen en sí, sino poder "pintar" el fondo de una página con 2 colores (verde muy claro y blanco, probablemente), separando ambos colores con una línea serpenteante, por así decirlo.
El efecto sería parecido a lo que se consigue finalmente con este tuto para Fotochopped. Pero en vez de 2 dunas me conformaría con una Además el resultado final sería similar, porque busco que quede como "arenoso", aunque no es imprescindible. Busco que un lado sea más claro que el otro, como en ese tutorial.

Por supuesto ese fondo debe ser lo suficientemente suave para que no moleste a la hora de leer el texto de encima, pero sí que se note lo suficiente como para distinguir el diseño y la forma.

Si alguien me dijera que se puede hacer sin necesidad de imágenes, sólo con CSS y usando algún código (y me explciara cómo) me haría el aprendiz de programación web más feliz del mundo mundial y parte del extranjero :-P

Saludos.

[halo]

Se puede, pero no hay estandar para ello. FF va a su bola, IE a la suya...

[HuanManwe]

Pero, ¿no se podría poner un código que detectara qué navegador está usando el visitante y que cargara un .css distinto dependiendo de la respuesta? Creo haber visto algo así hace tiempo.

He visto una forma de poner una línea que separe 2 lados del fondo, aquí pero el problema es que no distingue entre lo que hay a la izquierda y a la derecha. También he visto referencias a forma de hacer una imagen con photoshop y pasarla a HTML y CSS, usando un script llamado Color Scheme Designer. Pero no sé si será lo que necesito.

Saludos.

[Gepetto]

Echa un vistazo a esto: http://www.daboweb.com/foros/index.php/topic,21500.msg187316.html#msg187316

Puedes crea un fondo como el de ese enlace, partirlo con una curva y colorear un lado verde y otro blanco. Luego haces que se repita verticalmente para llenar la página. De esta manera la curva no tiene por que estar centrada (estará donde tu la pongas).

[Aj]

Pero, ¿no se podría poner un código que detectara qué navegador está usando el visitante y que cargara un .css distinto dependiendo de la respuesta? Creo haber visto algo así hace tiempo.

Un pequeño ejemplo de como hacerlo.....

Código: [Seleccionar]

var navegador;
var plataforma;
navegador=navigator.appName;
version=navigator.appVersion;
plataforma=navigator.platform;

if((navegador.indexOf("Netscape")!= -1)&&(version.indexOf("5.0")==0)){
  if(plataforma.indexOf("Linux")!=-1){
    document.write('<LINK REL="StyleSheet" TYPE="text/css" HREF="/contextoweb/css/estilos_aol.css">');
  }else{
    document.write('<LINK REL="StyleSheet" TYPE="text/css" HREF="/contextoweb/css/estilos_nt6.css">');
  }
}else{
  if(navegador.indexOf("Netscape")!= -1){
     document.write('<LINK REL="StyleSheet" TYPE="text/css" HREF="/contextoweb/css/estilos_nt.css">');
  }else{
     document.write('<LINK REL="StyleSheet" TYPE="text/css" HREF="/contextoweb/css/estilos.css">');
  }

}
Mira si te puede servir

[HuanManwe]

Echa un vistazo a esto: http://www.daboweb.com/foros/index.php/topic,21500.msg187316.html#msg187316

Puedes crea un fondo como el de ese enlace, partirlo con una curva y colorear un lado verde y otro blanco. Luego haces que se repita verticalmente para llenar la página. De esta manera la curva no tiene por que estar centrada (estará donde tu la pongas).

Muchísimas gracias por el enlace. Pero no sé cómo conseguir que un archivo como el que se pone de ejemplo podría servirme porque no sé cómo "partirlo con una curva". Yo la base que quiero conseguir es como el de este logo. Pero no quiero un logo, sino esa forma como fondo de página suave. El verde muy difuminado, y el blanco quizá algo más "coloreado" con un verde clarísimo, para que no quede blanco-blanco. Los circulitosa negros no sé si ponerlos (como un gris muy claro) o no, pero ese sería un problema distinto. Lo que me vuelve loco es lo de la forma geométrica en el fondo de página. He visto páginas con colores distinto segun derecha o izquierda, incluso con la división algo rasgada, como aquí (página encontrada en CSSmania.com) pero tampoco es lo que busco, además creo que todo es poner imágenes por capas, y no es eso. Yo pretendo evitar los archivos de imagen siempre que sea posible, y si no lo es pues usar el menor número que sea viable.

Estoy empezando a creer que lo que pretendo es imposible

AJ, muchísimas gracias por el código. Cuando llegue a casa esta noche lo probaré.

[Gepetto]

Simplemente dibujando una curva. Al "repetirlo" verticalmente (repeat-y) quedaria algo así:



Y el código seria este:

Código: [Seleccionar]

body {
background-image: url(tufondo.gif);
background-position: center;
background-repeat: repeat-y;
margin: 0px;
}
-----

Si lo que quieres poner el logo que comentas en "mosaico" (repetido en vertical y horizontal), entonces tendrias que utilizar "background-repeat: repeat;". Si lo que quieres es que no se repita por toda la página, entonces tendrás que especificar los límites -width y height- del bloque al que lo vayas a aplicar.