Foros del Web » Creando para Internet » Diseño Gráfico »

Microsoft - Como logran este efecto en sus páginas

Estas en el tema de Microsoft - Como logran este efecto en sus páginas en el foro de Diseño Gráfico en Foros del Web. Alguien sabe como logran poner un background de este estilo, ajustandose al tamaño del monitoy "resolucion" lo interesante es ke no se scrolea.. sin embargo ...
  #1 (permalink)  
Antiguo 07/01/2007, 23:31
 
Fecha de Ingreso: noviembre-2003
Mensajes: 343
Antigüedad: 14 años, 1 mes
Puntos: 0
Microsoft - Como logran este efecto en sus páginas

Alguien sabe como logran poner un background de este estilo, ajustandose al tamaño del monitoy "resolucion" lo interesante es ke no se scrolea.. sin embargo como logran este tipo de efecto??

http://microsoftatces.com/photos/pho...icture120.aspx
gracias..
__________________


La tecnología es un hecho objetivo, y el resultado está sujeto a la voluntad humana.
  #2 (permalink)  
Antiguo 08/01/2007, 02:22
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Microsoft - Como logran este efecto en sus páginas

Pues simplemente es una imagen en background :S nada mas y nada menos que eso.

Lo unico es que le han creado un repeat-y si no me equivoco para que solamente se repita en el eje Y.
  #3 (permalink)  
Antiguo 08/01/2007, 14:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 343
Antigüedad: 14 años, 1 mes
Puntos: 0
Re: Microsoft - Como logran este efecto en sus páginas

ah ok, lo que me dejo algo asombrado es la forma enque lo utilizan ya que no habia visto antes ese tipo de diseño masque en Flash, sin embargo supongo que ya nos podemos dar el lujo de utilizar imagenes asi como background ya que el ancho de banda ya tiende a ser un poco mayor para la mayoria de los usuarios..

Muchas gracias deja investigo un pokito acerca de eso, y luego lo comentamos el background...

ciao
__________________


La tecnología es un hecho objetivo, y el resultado está sujeto a la voluntad humana.
  #4 (permalink)  
Antiguo 08/01/2007, 22:02
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Re: Microsoft - Como logran este efecto en sus páginas

Pues no, no se repite en Y... es una sola imagen de fondo y la pagina tiene asignado un color de fondo que coincide con el color de la parte inferior de la imagen.
No le veo lo novedoso.

¿Por que no guardas la página en tu disco duro para analizarla y comprobarlo tu mismo?

Saludos.
__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #5 (permalink)  
Antiguo 08/01/2007, 22:36
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Microsoft - Como logran este efecto en sus páginas

Cita:
Alguien sabe como logran poner un background de este estilo, ajustandose al tamaño del monitoy "resolucion" lo interesante es ke no se scrolea.. sin embargo como logran este tipo de efecto??
Mediante CSS:

Código PHP:
background-imageurl(../images/msces/bground-top.jpg);
background-positiontop left;
background-repeatrepeat-x
Es una imagen de 24K que por dimensiones tiene: 1500 x 473px y, ciertamente el background, coincide con el pie de la imagen:

Código PHP:
background-color#05497A; 
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #6 (permalink)  
Antiguo 09/01/2007, 02:12
 
Fecha de Ingreso: noviembre-2006
Mensajes: 87
Antigüedad: 11 años, 1 mes
Puntos: 0
Re: Microsoft - Como logran este efecto en sus páginas

Hola Daniel Se ve que dominas mucho el tema de ajustar la web a otras resoluciones, a ver si me puedes aclarar una duda.

Por desconocimiento de CSS tengo toda la web de la siguiente manera por motivos de seguridad, ya se que puede ser rústico pero bueno..
Todo lo que ve el usuario son php que contienen un include a un html.


Si pongo en el php el código que proponer:
background-image: url(../images/msces/bground-top.jpg);
background-position: top left;
background-repeat: repeat-x;

Conseguiré evitar el scrolling del background?

Otro problemilla es muy simple varias imágenes de la web que monto son de cámara digital y si reduzco su tamaño para ajustarlas a una resolución de 800x600 no se aprecia la cara del que aparece en la foto como toca, hay alguna solución, la conclusión a la que he llegado es que es un tema de la foto y que no se puede hacer nada.

Muchas gracias de anteamno!
  #7 (permalink)  
Antiguo 09/01/2007, 13:18
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Microsoft - Como logran este efecto en sus páginas

Para tales efectos debieras, como en el código original incluir tales declaraciones para el body de la página:

Cita:
body, html
{
margin: 0px;
padding: 0px;
color: #000000;
font-family: Tahoma, Arial, Helvetica;
background-color: #05497A; /* 003f7b msces */
background-image: url(../images/msces/bground-top.jpg);
background-position: top left;
background-repeat: repeat-x;
}
Estas líneas, para quienes no hayan visto el enlace de muestra, están contenidas dentro del archivo common.css
Y, desde el html, se cargan de la siguiente manera:

Cita:
<link rel="stylesheet" href="/Themes/default/Style/Common.css" type="text/css" media="screen" />
Lo cual, va insertado entre los etiquetas <head></head> del documento.

Cita:
Conseguiré evitar el scrolling del background?
Los chicos de Microsoft, lo consiguieron ¿por qué no?

En cuanto a tu problema con las imágenes, debiera evaluarse que nivel de resolución tienen las mismas, qué tipo de interpolación estás usando y cuanto estás dispuesto a perder con la disminución de las dimensiones.
Si enviás algún enlace de la misma, seguramente alguien con más experiencia y talento podrá aportar también algún consejo.
Saludos!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #8 (permalink)  
Antiguo 10/01/2007, 01:23
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Microsoft - Como logran este efecto en sus páginas

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
Mediante CSS:

Código PHP:
background-imageurl(../images/msces/bground-top.jpg);
background-positiontop left;
background-repeatrepeat-x
Es una imagen de 24K que por dimensiones tiene: 1500 x 473px y, ciertamente el background, coincide con el pie de la imagen:

Código PHP:
background-color#05497A; 
Hola. Puedes hacer exactamente lo mismo así:

background: url(../images/msces/bground-top.jpg) top left #05497A repeat-x;

Con respecto a la imagen de fondo, me agrada cómo optimizaron el peso en Kb.
  #9 (permalink)  
Antiguo 10/01/2007, 01:46
 
Fecha de Ingreso: noviembre-2006
Mensajes: 87
Antigüedad: 11 años, 1 mes
Puntos: 0
Re: Microsoft - Como logran este efecto en sus páginas

Muchas gracias a ambos por compartir la experiencia!
Saludos!
  #10 (permalink)  
Antiguo 11/01/2007, 16:53
 
Fecha de Ingreso: noviembre-2003
Mensajes: 343
Antigüedad: 14 años, 1 mes
Puntos: 0
Re: Microsoft - Como logran este efecto en sus páginas

Gracias a todos, ciertamente no esta novedoso sin embargo esta bien hecho, y a mi parecer si da otra vista al sitio web.
muchas gracias a todos...
__________________


La tecnología es un hecho objetivo, y el resultado está sujeto a la voluntad humana.
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 02:31.