Basics of Ribbon Rules in CSS3 - dummies

Basics of Ribbon Rules in CSS3

By John Paul Mueller

CSS3 has incorporated ribbon rules which are colorful graphic rules that have replaced the standard HTML rule on many sites. The graphic rule adds an accent to the site and makes it appear a bit more finished. You access Ribbon Rules Generator by clicking Ribbon Rules on the web Tools menu of the main page.


How to create the ribbon rule in CSS3

Generating a ribbon requires that you specify the color and spacing to use for the ribbon element. The choice for color is to use a randomly generated sequence based on a base color, or to use specific color choices. The spacing is either random within the range you specify, or a specific size for each color choice.

The user selected colors and sequence spacing require a little extra care when you use them. First, make sure that any hexadecimal values you input are preceded by the pound sign (#) or else the ribbon will appear black when you generate it. Second, the color choices you make will appear exactly in the sequence you make them in the output ribbon.

If you plan to use the ribbon in a repeating manner, create a sequence and spacing that works together. Testing shows that a spacing of 26 works great — you end up with an even repeating sequence that will look great on the page.

After you make your choices, click Generate. Ribbon Rules Generator will create a ribbon rule for you and display it under the form. You can use the ribbon as it appears, or make changes for a different look. To save the ribbon you’ve created, right click its entry on the page and choose Save Image As from the context menu. Provide a name for the image and click Save to complete the action.

How to using the ribbon rule in CSS3

You can use the image containing the ribbon rule anywhere you can use any other image. However, most people will use the ribbon rule as part of a style. The following code shows one example of how you could use the ribbon rules created by this example.

<!DOCTYPE html>
 <title>Test the Ribbon Rules</title>
 <style type="text/css">
  margin: 5px;
  padding: 5px;
  border-style: solid;
  border-width: 6px;
  border-image:url(UserRule.GIF) 960 10 repeat;
  margin: 5px;
  padding: 5px;
  border-style: solid;
  border-width: 6px;
  border-image:url(RandomRule.GIF) 960 10 repeat;
 <h1>Test the Ribbon Rules</h1>
 <div id="Area1">
 <h2>This is Area 1</h2>
 <p>This area uses the user-selected settings.</p>
 <div id="Area2">
 <h2>This is Area 2</h2>
 <p>This area uses the random settings.</p>

You will use this to create a rule on a page. The page contains two areas. The first displays a ribbon rule created with user-specific settings; the second displays a ribbon rule created by using random settings. Of course, there are infinite possibilities in creating ribbon rules — these examples are simply representative of what you can do. The typical output from this example is illustrated below.