Todos utilizamos distintos background (fondos) para nuestros sitios o proyectos web que aplicamos desde nuestra hoja de estilos CSS, como por ejemplo hemos usado: imágenes, colores, etc.
Con la llegada del CSS3 y sus nuevas propiedades tenemos otras opciones de realizar fondos y estos echos al 100% con estilos en cascada (CSS3), como son los Gradientes: veticales, horizontales, oblicuos y por supuesto también formas o diseños y todos realizados solo con css3, he aqui un tutorial a la cual solo le he aplicado los estilos al «body» para poder realizar el fondo (background), comenzamos!
Solo aplicaremos los siguientes estilos a nuestro body o contenedor que desees aplicar este fondo, yo lo haré con el body de mi documento HTML5.
body {
background:
linear-gradient(163deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px),
linear-gradient(161deg, transparent 0px, #181818 1px, #222 2px, #222 15px, transparent 15px),
linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px),
linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px);
background-color: #121212;
background-position: 2px 1px, 23px 16px,48px 15px, 21px 30px;
background-size: 48px 30px;
}
Como pueder ver solo hemos aplicado unos gradientes (gradient), transparencias, tamaños y obviamente el color de fondo (para el fucking IE -9) y la posición de nuestro diseño con css3.
para que lo puedan visualizar mejor aca dejo la demo y la descarga de los archivos (contraseña: antocas.com), espero les sirva tanto como a mi este tutorial, saludos!
