Degradado de fondo con css
07 Marzo , 2010
Hoy os traigo un post para explicar como conseguir un fondo degradado utilizando una imagen que repetiremos en el eje horizontal (x) utilizando css (repeat-x). Para explicar el ejemplo voy a utilizar un degradado de azul a blanco, podéis usar la misma operatoria aplicando los colores que elijáis. Bien, los pasos son muy sencillos, lo primero será crear una imagen con el degradado que vamos a usar, está imagen puede ser muy delgada, de unos 5 o 10 px de ancho es suficiente. Es más, la costumbre más extendida es hacer esta imagen tan deslgado como 1px. No obstante, ten en cuenta que a menor anchura, mayor tiempo de carga pues el navegador tendrá que cargar tantas líneas sean necesarias para cubrir el ancho que indiquemos al indicarle que repita la imagen en el eje x, yo he elegido 16px de ancho. El alto debe ser el que se ajuste a tus necesidades, yo he hecho la imagen de 900px de alto. Esta imagen irá degradada desde el azul al blanco. Podéis hacer esta imagen fácilmente con photoshop. El segundo paso es crear un div en el que poner de fondo la imagen que hemos creado con el degradado y aplicarle la propiedad repeat-x en el estilo css. En el ejemplo que he creado y que podéis ver más abajo he puesto este div dentro de otro al que le he puesto el color blanco de fondo para que quede del mismo color que el final de mi degradado en caso de que la altura del contenido supere la altura de la imagen degradada. Nota estas dos cosas:
Estudia el código y verás como es relativamente fácil poner un degradado en el fondo de tu web creando un bonito efecto en el diseño que agrada durante la lectura del contenido. Visita el ejemplo y estudia el código haciendo clic derecho y luego clic sobre ver código fuente. Leer opiniones (0) |
|
|