This topic might be of interest to you if you are a web developer. While many UI developers were brainstorming to get a perfect background to suit the website, patterns or textures came to an answer, which simply solved the purpose elegantly.
Now, its time for CSS to replace those pattern images. Just understanding these simple concepts of CSS gradients may give you a chance to create a unique wonderful pattern for your website! These are just a couple of lines of code that would bring elegant website backdrops.
So, with no delay lets start exploring some interesting facts about CSS3 gradients.
There are two types of gradients – Linear and Radial. As the name is self-explanatory we will see how we can make them to be a perfect background-image. Follow the simple examples below to get a broader view.
Linear Gradient (Left to Right)
/* General*/ background: linear-gradient(left, #000, #fff);
/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#000), to(#fff));
/* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #000, #fff);
/* Firefox 3.6+ */ background: -moz-linear-gradient(left, #000, #fff);
/* IE 10 */ background: -ms-linear-gradient(left, #000, #fff);
/* Opera 11.10+ */ background: -o-linear-gradient(left, #000, #fff);
/*failover*/
background:url("linearimage.jpg")Note : For the following examples I have used webkit standards only and its better if you include prefixes for Internet Explorer, Opera, Mozilla and general for your styles. Please refer to first example for more detail.
Linear Gradient (Top to Bottom)
background: -webkit-linear-gradient(top, #fff, #000);
Linear Gradient with Stops
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
Radial Gradient (Centered)
background: -webkit-radial-gradient(circle, #000, #fff);
Radial Gradient (Positioned)
background: -webkit-radial-gradient(20% 50%, closest-corner, #fff, #2F2727);
Interesting is it not?! Well try different patterns and make them colourful!
You might be interested to check out the Gallery which we created to show you the power of CSS3 gradients! You can also make use of them for your websites. It is an interactive demo wherein you can apply any style to the page and check them if they are going to fit your website!
Note: This demo will work fine in all modern-browsers. For more compatibility you might want to use specific browser prefixes as seen in the first example.
