Pure CSS3 Scanlines Background

4 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Pure CSS3 Scanlines Background
mikethedj4
Traditionally to make background's like this...
bg-scanlines.png
Traditionally we would have to design the image in an image editor like PhotoShop or Gimp as seen below...
bg-scanline.png
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;
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;
}
You do not have the required permissions to view the files attached to this post.
User avatar
AnoPem
VIP - Donator
VIP - Donator
Posts: 441
Joined: Sat Jul 24, 2010 10:55 pm

Re: Pure CSS3 Scanlines Background
AnoPem
Thanks, could be very usefull :D
https://t.me/pump_upp
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Re: Pure CSS3 Scanlines Background
XTechVB
Cool, though i don't think is compatible with all browsers. Still good share, CSS surprises me more and more every day.
You can find me on Facebook or on Skype mihai_92b
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am

Re: Pure CSS3 Scanlines Background
Shim
Find my programs on Softpedia
4 posts Page 1 of 1
Return to “Tutorials”