Foros del Web » Creando para Internet » Diseño web »

Diseño web

Estas en el tema de Diseño web en el foro de Diseño web en Foros del Web. Deseo comenzar a realizar el diseño de mi web y me quiero basar en esta pagina http://www.wix.com/html-templates/html/web/marketing-solutions-html es decir como hacer ese fondo es algo ...
  #1 (permalink)  
Antiguo 11/07/2012, 15:00
 
Fecha de Ingreso: junio-2012
Mensajes: 46
Antigüedad: 11 años, 11 meses
Puntos: 5
Diseño web

Deseo comenzar a realizar el diseño de mi web y me quiero basar en esta pagina

http://www.wix.com/html-templates/html/web/marketing-solutions-html

es decir como hacer ese fondo es algo así como glass o transparente no estoy seguro,la pregunta es ¿en que herramienta logro hacer ese efecto de glasseado o como sea que se llame?.Unos tips no estarían de más .Gracias

Última edición por tommy_tony; 11/07/2012 a las 15:23
  #2 (permalink)  
Antiguo 04/09/2012, 01:39
Avatar de proyectos_bds  
Fecha de Ingreso: septiembre-2012
Mensajes: 10
Antigüedad: 11 años, 8 meses
Puntos: 2
Respuesta: Diseño web

Hola
Te refieres a la capa transparente sobre la que aparecen los contenidos? Yo para eso utilizaría una imagen con transparencia. Es decir te creas una imagen en Photoshop del tamaño que quieras, ésta como se repite podría ser de 1px por 1 px y ponerla con re-repeat en el CSS, le pones color de fondo negro y le das la transparencia que quieras a la capa y la guardas para web como .png, con eso te cogería la transparencia.
Espero haberte ayudado
  #3 (permalink)  
Antiguo 04/09/2012, 09:12
Avatar de Adbane  
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 12 años, 10 meses
Puntos: 6
Respuesta: Diseño web

Para usar de fondo una imagen que ocupe toda la pantalla, independientemente de que tipo de pantalla y resolución, te aconsejo el plugin en jQuery fullBg.

Para lo de un fondo transparente, hay dos modos, uno en CSS3, con la propiedad "opacity", aunque ojo, afectará también al contenido, y la otra, más efectiva por el tema de la compatibilidad en navegadores (inclusive IE), lo que dice proyectos_bds.

Crea con Photoshop o cualquier otro programa de edición de imagenes (GIMP es gratuito), un archivo de mínimo 1x1, blanco, y le bajas la opacidad. Importante guardarlo como png, en gif también sirve, aunque por estética png es la mejor opción.

Y el código que tendrias que usar, usando de ejemplo para añadirselo a un div:

Código CSS:
Ver original
  1. div {
  2.     background:url('imagen.png') repeat;
  3. }

La propiedad repeat repite la imagen tanto abajo como de lados, repeat-x la repite solo hacia los lados, repeat-y solo hacia abajo, y no-repeat no la repite, solo la mostrará una vez. Después de repeat se suele poner un color (para los casos en los que la imagen se repite en una sola dirección), pero en tu caso no, aunque puede ponerse la propiedad "transparent", haciendo alusión a que el fondo será transparente, pero no la imagen, don't worry.

Por si te interesa, la propiedad opacity, recuerda que también afecta al contenido:

Código CSS:
Ver original
  1. div {
  2.     /*Se usan valores del 0 al 1.0*/
  3.     opacity:0.4;
  4.     filter:alpha(opacity=40); /* Para IE8 y versiones anteriores */
  5. }
__________________
Diseñador web por amor al arte, o al HTML mejor dicho
  #4 (permalink)  
Antiguo 08/09/2012, 23:35
 
Fecha de Ingreso: agosto-2012
Ubicación: Peru
Mensajes: 24
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Diseño web

Eso lo hago con unos DIV y con el atributo en el CSS opacity

Solo pones un fondo y sobre el un DIV con opacity, busca en la web como utilizarlos y veras lo sencillo que es.

Saludos

Etiquetas: diseño
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 18:27.