Tras un tiempo en que estamos publicando menos (nos hemos tomado un descanso que necesitábamos) volvemos, poco a poco, a nuestro ritmo habitual...



Durante este tiempo hemos desarrollado algunos sitios webs nuevos, en uno de ellos hemos usado dos imágenes y degradado para el fondo del body. Esta posibilidad que nos ofrece CSS3 nos abre muchas puertas para el diseño web. En este caso se trataba de imitar un efecto de nueces cayendo y que se amontonaban en la parte de abajo del sitio. Como sabéis cada página, según sea su contenido, tiene diferentes longitudes y mantener esas nueces apiladas en el fondo nos obliga a usar dos imágenes.

Esto podemos conseguirlo solo con CSS añadiendo
body {
background-color: #000;
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -webkit-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -moz-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -ms-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -o-linear-gradient(top, #000, #fff);

Con este CSS logramos insertar dos imágenes sobre un degradado de fondo. Usamos márgenes negativos y porcentajes para que se sitúen donde queremos y sea adaptable la posición a la pantalla. Evidentemente solo disponible para navegadores que implementan estas características de CSS3.

Podéis verlo funcionando en Walnuters(aún en fase beta).

Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

1 comentario:

  1. Muy bueno carlos, el doble background-image es algo que está muy soportado y que se usa demasiado poco (a mi entender). Sólo un detalle, no hace falta el prefijo -ms-, ya que cuando llegue IE 10, los gradientes llegarán sin prefijo.

    ResponderEliminar