Comunidad de diseño web y desarrollo en internet

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.

Este ejemplo funciona en Firefox desde la versión 3.6, y en Chrome y Safari desde las versiones 5.1.


Ver ejemplo aquí

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate