Welcome to Curry-Man.com! I know that there are other sites already online with tutorials, blogs, and articles about web development, but I thought that I would take the time to post my experiments and experiences with Web and HTML5 Application Development as well. I understand that your time is valuable, so I promise to keep my tutorials short and to the point. Please check back weekly to view the updated tutorials!
I used to use images to create gradients in my pages and web apps. However, the more gradients you plan to use, the more images you have to manage, and the users have to download. Managing the images that you use in templates can be difficult enough, even with the use of Sprites. The use of images also impacts the amount of data that a user is required to download to view your pages (which can be a big problem over time for visitors with limited bandwidth plans on mobile devices).
There is too much to cover in one tutorial on using CSS to create gradient backgrounds, so I will continue to explain the various techniques used to create CSS Gradients over the next few weeks. In this week's tutorial, we will look at setting up a basic linear gradient that works cross-browser.
First, set up the class for your gradient. Set the background-color, and background-repeat properties. The background-color should be the final color of the gradient. The background-repeat should be set to repeat-x or you may run into issues with older browsers repeating the gradient after 100% of the browser height (which becomes an issue when you have longer pages).
.gradient {
background-repeat: repeat-x;
background-color: #ffffff;
}
This next part is a little cumbersome, but is required to make sure that your CSS gradient is cross-browser compatible. For IE, there are 3 statments needed:
The filter is used for IE 8 and 9. IE 10 Customer Preview uses the -ms-linear-gradient function in the background-image property. IE 10 (and the W3C recommendation) uses the linear-gradient function on the background-image property.
Mozilla, Opera, and Chrome are similar, but use slightly different functions. All three functions are called on the background-image property and use the same parameters, but Firefox uses -moz-linear-gradient, Opera uses -o-linear-gradient, and Chrom uses -webkit-linear-gradient. The parameters for a linear gradient are (in order):
For this example we are using the 'top' side of the element only. You can specify the degree that you want the gradient to use, or a specific side or corner (such as 'left' or 'bottom'), but we will cover that in a different tutorial. The Color and Color Stop allow you to specify the length of the gradient that the color that you specify should fill before the gradient takes effect. For example, you could say that you wanted to use #000000 30%, which would fill 30% of the element with the color #000000 ("black"). This is actually a list of color-stops, and is not usually a single color-stop. Adding these functions are shown below:
.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
background-image: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
background-repeat: repeat-x;
background-color: #ffffff;
}
To wrap up our linear gradient, we must not forget to make sure that our CSS works in Webkit browsers as well (Safari, and older versions of Chrome). To do this, we use the -webkit-gradient function on the background-image property. The syntax for this function is different from the others in that you specify the parameters in the following order:
For our tutorial we are using only linear types, starting from the top and going to the bottom, using only 2 color-stops. So, to wrap up our CSS Gradient class, we add in the -webkit-gradient, resulting in the following completed class:
.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
background-image: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
background-image: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #000000), color-stop(1, #ffffff));
background-repeat: repeat-x;
background-color: #ffffff;
}
Dummy Ipsum
Dummy Ipsum
Dummy Ipsum