Crea tu Web: Indice de diseño

El fondo o background

Ya conociamosel atributo background para colocar una imagen de fondo en la página o en un contenedor cualquiera mediante el uso de los estilos CSS. Ahora, con la nueva norma CSS3, los fondos ganan en prestaciones, la más llamativa quizás sea la posibilidad de tener varias imágenes de fondo sin necesidad de acudir a trucos o a multiples capas. CSS3 simplifica las cosas.

Varias imágenes

Esta línea en la deficnición del estilo muestra la simpleza del procedimiento

background-image:url("imagen"), url("imagen");

La primera imagen es la que está arriba del todo, la segunda estará debajo y así podríamos continuar. Lógicamente la imagen superior deberá dejar ver a la inferior por ejemplo con zonas transpatentes. Esto da multiples posibilidadades para crear fondos compuestos.

Situación

Pero no solo esto ahora podemos decidir dónde debe comenzar el fondo, no simpre nos interesa que comience en la esquina superior izquierda, podemos necesitar un cierto desplazamiento. Tan fácil como

background-origin:content-box;

Este atribuyto tiene varios valores posibles, una imagen te lo aclarará

atributes background css3

El contenedor es el elemento donde colocas el fondo, pues estos valores te permite que el fondo no se quede cubierto con el borde o que quede bajo el contenido solo.

Tamaño

Pues si, puedes modificar el tamaño de la imagen que uses como fondo. Puedes dar el tamaño como valor aboluto, en pixels, o como un porcentaje del contenedor donde situes el fondo

background-size:80px 60px;

Incluso puedes usar el atributo cover con lo que la imagen se re-escalará para cubrir todo el contenedor. O también puedes usar contain, quedará ajustada al contenedor.

Míralo en funcionamiento y ya sabes, para aprender no hay nada como experimentar.

Degradados

¿Qué te parecería un fondo degradado sin tener que crear una imagen para eso? Pues con CSS3 puedes hacerlo.

.recuadro{
background-image:linear-gradient(
right bottom,
left bottom,
rgb(169,113,40)15%,
rgb(203,147,68)58%,
rgb(244,177,96)79%)

Definimos donde comienza el degradado (en el ejemplo desde arriba a la derecha, hasta abajo a la izquierda: bandas horizontales). Luego se dan los colores de cada banda y un porcentaje para indicar el difuminado en la zona de separación.

arriba


Comunidad Virtual. Alojamiento gratis