Using css3 for website background
I want to get exactly this result with CSS3 and HTML5 technologies without using images.
here is the HTML
<div id="overlay"></div>
<div id="lines"></div>
and CSS
body {
background: #45484d;
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-3;
}
I can get the redo part in the jsfiddle:
http://jsfiddle.net/tt13/BA8Wk/2/
But I can't figure out what to do otherwise. Can anyone help me achieve this result?
+3
source to share
2 answers
- dabblet: http://dabblet.com/gist/4649123
- jsfiddle: http://jsfiddle.net/W4LpR/6/ (try opening results in a larger window)
Html
<div id="overlay"></div>
<div id="lines"></div>
<div id="lines2"></div>
CSS
body {
background-image: -ms-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -moz-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -o-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 447, color-stop(0, #636363), color-stop(1, #27282B));
background-image: -webkit-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: radial-gradient(circle closest-corner at center, #636363 0%, #27282B 100%);
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-o-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#lines2 {
background-size: 100px 100px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-3;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-2;
}
+2
source to share
My attempt (only -webkit rules (Chrome) for demo):
background-size: 100px 100px;
background-image:
repeating-linear-gradient(0deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(0deg, #fff 1px, transparent 2px, transparent 100px),
repeating-linear-gradient(90deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(90deg, #fff 1px, transparent 2px, transparent 100px);
( fiddle )
And here with the stripes added:
background-size:4px 4px;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);
0
source to share