Learning how to apply CSS color gradients to Web pages
Learning how to apply CSS color gradients to your Web pages potentially heightens the appeal, or at least the drawing power, of those pages. You can apply the effect to specific elements on a Web page, like a particular paragraph or words within a paragraph. If you use it for an entire page, consider using colors that are fairly close to each other, as highly contrasting colors may pull view attention away from your page's content.
-
Non-Internet Explorer Browsers
-
-
If you have a non-Explorer browser, you can create a gradient with CSS by creating a style that assigns the "background" attribute a value that includes the keyword "-moz-linear-gradient." This value must also contain the color values comprising the gradient. When you apply this and other approaches to producing a gradient, be sure to choose a color for the foreground that will stand out against the graded background. For example, if that background shifts from white to red, choose black or another non-red hue for your text or other foreground element. Specify that foreground color with the CSS "color" attribute.
Sample CSS Code for non-IE Browsers
-
-
-
The CSS code following this section creates a gradient that progresses from black to white. You can view the code's gradient effect by pasting it into a Notepad document, saving it with a "htm" file extension, then opening it in your browser.
<html>
<head>
<style>
.gradStyle {
background: -moz-linear-gradient(top, #000000, #FFFFFF);
color: #050505; /* color of text */
height: auto; /* stretch gradient to height of element*/
padding: 15px; /* add a margin between gradient edge and element edge*/
}
</style>
</head>
<body>
<P class="gradStyle">
This background shows a gradient.
</P>
</body>
</html>
Internet Explorer and All Browsers
-
-
-
The solution using the "linear-gradient" keyword does not work in versions 8 or below of Internet Explorer. You can instead use a solution that relies on a small image file that shows a gradient. Use a painting program such as Microsoft Paint to create the gradient, then use CSS to repeat this image throughout the background of an element. As with the non-IE approach to creating gradients, this approach involves setting the CSS "background" attribute. Instead of specifying color values after that keyword, however, specify the name of the image file that contains the gradient with the "URL" keyword. Indicate the image should be repeated by specifying the "repeat-x" keyword at the end of the "background" clause.
Sample Code for All Browsers
-
-
-
The following Web page for creating a gradient will work in all browsers. Before opening the page in your browser, create a color gradient image file in a painting program, then save this file as "grad.gif" in the same directory as the Web page.
<html>
<head>
<style>
.gradStyle {
background: url("grad.gif") 0% 0% repeat-x;
color: #050505;
height: 150px;
padding: 15px;
}
</style>
</head>
<body>
<p class="gradStyle">Another background with a gradient.</p>
</body>
</html>
-
Versi cetak
Message Me On Whatsapp