Earlier, when Web designers and developers needed to use gradient colors in
their Web pages, they had to find some workarounds such as creating a gradient
in Photoshop and then importing it as an image in the HTML file. However, thanks
to the amazing abilities of CSS3, you can now easily create gradients within
your stylesheet itself. If in case you are not aware of the term gradient, it
means a smooth change over from one color or more colors to another.
There are basically two types of gradients supported in CSS3, namely, linear and
radial.
In a linear gradient, colors shift across in a linear fashion from one position
to another, such as top to bottom, left to right or so on.
Let's take an example of a linear gradient to understand this better. In this
example, the color will shift or alter from light green to white, from top to
bottom.
To achieve this effect, first create the following HTML file and save it as
index.html:
Index.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing CSS3</title>
<meta name="description"
content="">
<link rel="stylesheet"
href="css/style.css">
</head>
<body>
<article>
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nam molestie blandit elit sit amet
vulputate. Nullam nec pharetra mi.
Sed aliquet, turpis a
rhoncus molestie, odio sapien imperdiet elit, non consequat sapien magna eu sem.
Nulla facilisi. Vivamus augue enim, aliquam id vestibulum vitae, laoreet quis
massa. Integer lacinia ultrices enim, id tristique justo blandit vitae.
<br>
<br>
Donec
nulla lectus, mattis vel pellentesque non, interdum ut nunc. Suspendisse
potenti. Quisque a mauris dui. Nulla dictum augue eu lorem ornare sollicitudin
egestas leo lacinia. Suspendisse potenti. Phasellus interdum lectus vel ipsum
porta egestas. Maecenas in elit ut tortor vestibulum tristique. Proin imperdiet,
felis non varius interdum, ipsum nisi malesuada metus, a porttitor est nibh non
tortor. Duis diam diam, facilisis vel egestas eu, tempor ut nunc. Nam pharetra,
tellus lacinia semper tempor, elit metus adipiscing massa, ut gravida neque
felis vel libero.
<br>
<br>
Sed
semper tincidunt viverra. Mauris egestas nunc at nibh condimentum volutpat.
Phasellus imperdiet adipiscing quam nec condimentum.
Aenean at ornare sem. Vestibulum
vitae nibh ligula. Ut ac egestas nisi.
Sed a nisl lorem, vel
pretium neque. Duis tincidunt nulla sit amet odio euismod ut blandit augue
congue. Quisque ac lorem vitae nisl cursus volutpat. Phasellus bibendum lacinia
feugiat. Nunc enim ligula, auctor iaculis commodo et, varius sit amet libero.
Maecenas eu ante ut purus luctus semper eu et elit.
Maecenas sit amet lectus justo.
<br><br>
<a href="http://www.lipsum.com/feed/html">About
Lorem Ipsum</a>
</article>
</body>
</html>
As you can observe, the HTML markup is based on the HTML5 standard since it uses
only a short doctype style instead of the earlier lengthy syntax. Also the HTML
markup makes use of the article tag to contain the main text.
The Lorem Ipsum paragraphs used in the HTML file is simply dummy text that is
enormously famous in the printing and typesetting industry. It has been the
industry's standard dummy text since the 1500s, when an unknown printer jumbled
some type (printed characters) to make a type specimen book.
Now, the HTML file is created but you still need the CSS3 styles.
Save the following code in a file named style.css under the css folder:
css/style.css
article {
display:
block;
text-align:
justify;
width:
600px;
margin:
1em auto;
padding:25px;
background:
-moz-linear-gradient(to bottom, #99FF66, white);
-moz-border-radius: 15px;
background-image:
-webkit-gradient(linear, left top, right bottom,
from(#99FF66), to(white),
color-stop(90%,white));
-webkit-border-radius:15px;
background-image:-o-linear-gradient(to
bottom, #99FF66, white);
border-radius:15px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99FF66',EndColorStr='white');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99FF66',EndColorStr='white')";
font-family:
Georgia, serif;
font-size:16px;
}
What you did here basically is to define a display style as block to depict the
body text in a block format. Then you justified the text, specified the margin
and padding. After this, you define the background color gradient for each of
the four popular browser types - Opera, Chrome, Firefox, and IE. The basic
syntax for most of them is similar, except for the IE syntax because for IE, you
will use the filter to render the gradient. There are many drawbacks of using IE
filters (such as performance slowdown, lack of support for radial gradient) but
that's the only way to use gradients in a version earlier than IE9. When you
test the output, you will find identical results on all these browsers.
(remember that IE8 IE doesn't support border radius or the article tag so if you
have only IE8, the output might not render correctly, in that case, just replace
<article> markup with <p> tags). You will also notice that we have used a
border-radius style to define rounded borders for the block that will contain
the text.
Opera:
![CSS1.jpg]()
Chrome:
![CSS2.jpg]()
Firefox:
![CSS3.jpg]()
Conclusion
Thus this article explained in brief what are the types of gradients in CSS
and demonstrated with an example how to create and use linear gradients, along
with cross browser compatibility. In forthcoming articles, you will see how to
create and use radial gradients, work with more complex gradients and so forth.