Post
Ask Question

Using Border Radius and Gradients in CSS3: Part I

Introduction

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>
<html lang="en">

<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 a 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.


Similar Articles