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.
Por clauditalujan el 16 de Diciembre de 2011
¡que gracioso!! muchas gracias
Código :
Y muchas gracias por acomodar el formato de mi publicación, la hice casi a las 2:00 de la mañana y estaba un poco "mareado".
Espero poderles seguir aportando.
Por pablo1416 el 17 de Diciembre de 2011
johnwmartinez :
copado es algo cool, o buena onda. en argentina
Mariux :
johnwmartinez :
copado es algo cool, o buena onda. en argentina