Pure CSS3 Scanlines Background
Posted: Sat Mar 08, 2014 4:12 pm
Traditionally to make background's like this...
Traditionally we would have to design the image in an image editor like PhotoShop or Gimp as seen below...
Since the release of HTML5 and CSS3 we can now do this in code. Why would you want to do it in code? No need for third party software and the limitations are limitless. You can make some amazing backgrounds as CSS3 includes multiple background images so be as creative as you like.
Here's the code! Enjoy wahooo;
Here's the code! Enjoy wahooo;
Code: Select all
body {
-webkit-background-size:40px 40px;
-moz-background-size:40px 40px;
-o-background-size:40px 40px;
background-size:40px 40px;
background-image:-webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(0,0,0,0.1)), color-stop(25%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.1)), color-stop(75%, rgba(0,0,0,0.1)), color-stop(75%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));
background-image:-webkit-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
background-image:-moz-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
background-image:-o-linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
background-image:linear-gradient(left top, rgba(0,0,0,0.1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
background-color:#2a2a2a;
}