Efecto: Fondo Solo con CSS3 (Background)

mayo 27, 2013 | Html5 & Css3, Recursos

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!

Relacionados