MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación > Webmasters - Diseño Web - Programación - Diseño gráfico

¿Imagen redondeada de fondo con CSS?

<< < (2/2)

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:

--- Cita de: HuanManwe en 02 de Octubre de 2006, 05:08:27 pm ---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.

--- Fin de la cita ---

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


--- Código: ---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">');
  }

}
--- Fin del código ---

Mira si te puede servir

HuanManwe:

--- Cita de: Gepetto en 02 de Octubre de 2006, 05:55:03 pm ---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).

--- Fin de la cita ---
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 :-D

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: ---body {
background-image: url(tufondo.gif);
background-position: center;
background-repeat: repeat-y;
margin: 0px;
}
--- Fin del código ---

-----

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.

Navegación

[0] Índice de Mensajes

[*] Página Anterior

Ir a la versión completa