Pure CSS3 Scanlines Background
4 posts
Page 1 of 1
Traditionally to make background's like this...
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;
Traditionally we would have to design the image in an image editor 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.
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
I have seen such things - http://lea.verou.me/2010/12/checkered-s ... gradients/
Find my programs on Softpedia
4 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023