viernes, 16 de diciembre de 2011

Crear un fondo de líneas diagonales sin imágenes con CSS3

Crear un fondo de líneas diagonales sin imágenes con CSS3: El día de hoy les traigo un pequeño truco para hacer un fondo con líneas diagonales, sin usar imágenes hecho en CSS3.

El código es el siguiente:

Código :


body {
background: -moz-repeating-linear-gradient(45deg, #005588, #00aacc 30px, #eee 30px, #eee 71px);
background: -webkit-repeating-linear-gradient(45deg, #005588, #00aacc 30px, #eee 30px, #eee 71px);
background-size: 100px 100px;
}


Listo. Con esto vas a tener el fondo de tu website como si fuera una textura de líneas diagonales. Explico el código:

Para crear estas líneas diagonales de manera repetitiva empiezo haciéndolo con “repeating-linear-gradient” en la propiedad “background”.

Luego, debo definir los valores que llevará el degradado.

  • Lo primero que me pide es la inclinación (o rotación) en ángulos, que para el ejemplo le he asignado 45 grados (deg); esto significa que las líneas que están en constante repetición estarán ubicadas de manera diagonal.

  • El siguiente valor es la posición de cada línea.


Por último, se asigna una nueva propiedad “background-size” indicando que el ancho y alto de la pantalla debe medir lo máximo posible.

[nota:51506897cf]Este ejemplo funciona en Firefox desde la versión 3.6, y en Chrome y Safari desde las versiones 5.1.[/nota:51506897cf]

Ver ejemplo aquí

Enviar comentario



No hay comentarios:

Publicar un comentario