CSS3 Linear Gradients

Free HTML5 Game Tutorial for Beginners: Page 13

Overview Advantages Prefixes Gradient Design Example Gradient Summary Mobile HTML Markup Desktop HTML Markup
Linear Graded Buttons

Overview

This tutorial demonstrates how to create buttons with a linear gradient background using CSS3. This lesson briefly explains the advantages and disadvantages of CSS3 gradients.

Graphics for each button display below. A CSS3 styled button displays first or above a GIF button. The styled button might look similar to the GIF button. However buttons render differently in various Web browsers.

CSS3 Linear Gradient Versus GIF Buttons

CSS3 Gradient

GIF Gradient

Button with Blue Gradient

CSS3 Gradient Advantages

CSS3 gradients eliminate the need to prepare graphics with gradients, then download each graphic. CSS3 creates crisp clean lines which don't blur when enlarged or reduced in size.

Disadvantages

Unfortunately some browsers expect different syntax when declaring rule-sets which define gradients. The background gradients for the CSS3 linear gradient button in the CSS3 Linear Gradient Versus GIF Buttons above, require five different prefixes. Four prefixes are provided to display gradients for a range of browsers. The fifth property is the default for those browsers which don't support gradients. However as time moves on, more browser vendors implement display with standard rule-sets. In other words, we might not need different styles with newer browsers.

Design the Gradient

Fortunately CSS rule-sets which declare gradients, include a number of similarities between browsers. First, popular browsers accept colors in hexadecimal format. Second, the value top works the same within browsers which support gradients.

The value top indicates gradient colors start at the top of an element and gradually change toward the bottom. The first color value becomes the top color. The second color value becomes the bottom color.

Third browsers which don't support CSS3 gradients, continue to accept a default background color. The example linear gradient rule-set includes background: #1929e0;. Buttons in older browsers display with a light blue green.

Linear Gradient Prefixes

The following prefixes declare linear gradients for a set of older browsers. Try the standard rule-set in browsers you plan to target, for your games. If you're not concerned about users with older browsers or older devices, then stick to standards.

  1. -webkit-linear-gradient for Chrome versions 10 through 25, and Safari version 5.1 and higher.
  2. -o-linear-gradient for Opera versions 11.1 to 12.3.
  3. -moz-linear-gradient for Firefox versions 3.6 to 15.
  4. linear-gradient the standard format.

Example Button Gradient

The CSS button selector below, styles all buttons by default. The border value solid 1px blue, creates a solid blue border one pixel wide.

The gradient starts at the top with hexadecimal color #1929e0, and ends at the bottom with color #137fff. The example linear gradient rule-set applies the top color as the default background color for those browsers which don't support CSS3 gradients.

The following listing demonstrates creating a linear gradient background for buttons.

Linear Gradient Rule-Set

button{
color:white;
border:solid 1px blue; 
background: #1929e0;  
background: -moz-linear-gradient(top,  #1929e0,  #137fff);    
background: -webkit-linear-gradient(top,  #1929e0, #137fff); 
background: -o-linear-gradient(top,  #1929e0, #137fff);    
background: linear-gradient(top,  #1929e0, #137fff);
}

To display the button in an HTML Web page simply use the button tag.

<button>Button Label Here</button>

More Options

Any colors which fit within the RRGGBB color format, can be used for gradients.

There are many more options for gradients, such as amazing radial gradients, gradients by angle, and sets of colors with stop positions. This tutorial demonstrates one simple use of this great feature.

Summary

This tutorial demonstrated how to create buttons with a linear gradient background using CSS3. This lesson briefly explained the advantages and disadvantages of CSS3 gradients.

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Game Tutorial for Beginners was prepared for the Web in 2012. HTML5, CSS3, and JavaScript have improved over time. Game Tutorial for Beginners doesn't include state of the art technology, yet still contains many useful features and ideas.
Copyright © 2015 Seven Thunder Software. All Rights Reserved.