CHAPTER 3
Manipulating Objects
This chapter introduces 19 groups of CSS classes you can use in your web pages to manage the positioning of elements, change text and background colors, add gradient fills and box shadows, alter transparency, and do a whole lot more.
Using the supplied PC.css file (available at plugincss.com), you can simply add class names to your HTML class declarations to apply any of a wide range of styling to an element, without having to write any CSS yourself.
And because modern browsers support the use of multiple class names in a declaration, you can supply as many classes as you like to style elements exactly how you want then. This means that with over 880 classes to draw on in this chapter alone, you can concentrate on creating great web pages without the hassle of writing and tweaking CSS rules.
PLUG-IN 1: Positioning
The positioning classes let you decide the type of positioning to use for an object between the four types available (absolute, fixed, relative, and static), each of which changes the way CSS properties will affect objects using them. For example, Figure 3-1 shows two sections of text that have been given vertical offsets of 25 pixels, but because one has absolute positioning and the other is fixed, when the document is scrolled, one of them scrolls and the other remains where it is.
Classes and Properties
FIGURE 3-1 Different positioning types behave in different ways.
About the Classes
The four classes in this group are absolute, fixed, relative, and static, and they have the following effects:
• absolute When this position property is assigned to an object, it can be removed from the normal flow of the document to any other part. When it is moved, any other objects that can will move in to occupy the space released. Absolute objects can be placed behind or in front of other objects, and their coordinates are relative to the first parent object that has a position other than static.
• fixed This type of positioning is similar to absolute, except that the object’s coordinates are based on the browser window, such that if the document is scrolled, any fixed objects remain where they are and do not scroll with it.
• relative An object that is given relative positioning has its coordinates based on the location it occupied when the document was fully loaded.
• static Static positioning is the default for all elements and indicates that an object is to remain at the position within a document that it first occupied when the document was fully loaded.
How to Use Them
To use these classes, you reference them from HTML, like this:
<span class='absolute'>Example text</span>
Here’s an example HTML page illustrating use of the absolute and fixed classes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Plug-in CSS: Example 1</title>
<link rel='stylesheet' type='text/css' href='PC.css' />
<script src='PJ.js'></script><script src='PC.js'></script>
</head>
<body>
<span class='absolute' style='left:100px; top:25px;'>
Absolute 100 x 25
</span>
<span class='fixed' style='left:300px; top:25px;'>
Fixed 300 x 25
</span>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
In this example, one span has been made absolute and moved to a position 100 pixels across by 25 down from the document start, while the other is fixed at an offset of 300 pixels across and 25 down from the top left corner of the browser window.
The <br /> tags that follow create 22 blank lines so that if you open this code in a small browser window, it will create a scroll bar at the right side which, if you scroll it, will move the text with absolute positioning, but the fixed text will remain in place.
You probably have noticed the use of inline styles in this example, such as style= ’left:100px; top:25px;’. These are required to assign the coordinates to each element. Later on, you will see how you can use much simpler classes instead of direct CSS rules.
Also, to save on typing, instead of using the longhand class names of absolute, relative, fixed, and static, you can use the alternate shorthand names of abs, fix, rel, and sta instead (there are handy shorthand versions for many of the more commonly used classes in this book).
NOTE Because this is the first example, I have shown you a complete HTML web page including all the lines you need at the start, such as the document type and the “saved from” comment used to stop Internet Explorer from displaying errors when a page is viewed on a local file system. I have also shown the page title and the HTML required to load in the style sheet and JavaScript files. However, in future examples I will show only the main HTML. Don’t forget that you can download all the examples in their entirety from the companion web site at plugincss.com.
The Classes
.absolute, .abs { position :absolute; }
.fixed, .fix { position :fixed; }
.relative, .rel { position :relative; }
.static, .sta { position :static; }
PLUG-IN 2: Floating
The float property makes it possible for you to choose to place an object at either the right or left of a section of HTML and have accompanying text flow around it. To enable you to do this without writing any CSS rules, you can use the ready-made ones supplied with this plug-in.
In Figure 3-2, both the leftfloat and rightfloat classes have been used to display boats on either side of the screen with text flowing around them.
Classes and Properties
FIGURE 3-2 Using the leftfloat and rightfloat classes
About the Classes
This group has three main classes:
• leftfloat This class floats an object to the left, with other elements flowing around it. The flowing can be exited by issuing a <br clear=’left’> tag, which causes all following HTML to appear under the floated object.
• rightfloat This class floats an object to the right, with other elements flowing around it. The flowing can be exited by issuing a <br clear=’right’ > tag, which causes all following HTML to appear under the floated object.
• nofloat Using this class will unfloat an object that has previously been floated.
As well as the shorthand versions of these class names, there is another group of classes that have the suffix _h appended to their names. This is one of the more powerful features of the plug-ins in this book in that (where it makes logical sense) each class also has an accompanying hover class denoted by the _h suffix. When these hover classes are used, their styles will be applied only when the mouse is over the object to which they refer. This makes it easy for you to apply rollover and other dynamic effects without writing a single line of either CSS or JavaScript.
How to Use Them
To use these classes, you refer to them from any section of HTML to which you wish them applied. For example, the following HTML creates two floats—one on the left and one on the right—with text flowing around them (as shown in Figure 3-2):
<font size='4'> <img class='lf' src='boat.png'>A boat is a watercraft of modest size designed to float or plane, to provide passage across water. Usually this water will be inland (lakes) or in protected coastal areas. However, boats such as the whaleboat were designed to be operated from a ship in an offshore environment.<br clear='left'> <img class='rf' src='boat.png'>In naval terms, a boat is something small enough to be carried aboard another vessel (a ship). Strictly speaking a submarine is a boat as defined by the Royal Navy. Some boats too large for the naval definition include the Great Lakes freighter, riverboat, narrowboat and ferryboat.<br clear='right'>
Note the use of the <br clear=’…’> tags to end the floating at specific places in the HTML. As well as these specific tags, if you want to ensure that no floats are applied to a section of text, you can also issue the tag <br clear=’all’> to clear any and all left or right floats. You will also see that I have used the lf and rf shorthand versions of the class names, instead of having to type in the longer class names of leftfloat and rightfloat.
NOTE As mentioned in the previous plug-in group, the start and end portions of the HTML file are not shown here since they will usually all be exactly the same as each other. Therefore, only the main HTML is shown in this and all future examples.
Using the Hover Classes
To change the float property of an object when the mouse passes over it, you can use one of the class names with the _h suffix, like this:
<img class='lf_h' src='boat.png'>This text will display below the boat image by default. But when the mouse is passed over the boat it will move up to flow around the image.
In the following and in many other plug-in groups, you will see how this feature particularly comes into its own.
NOTE Although it’s not likely that you would often want to change the float property of an element when it is hovered over, it is certainly possible that this feature could be required for certain applications and, as it takes only a few extra characters of CSS to support, there’s no reason to omit the feature.
The Classes
.leftfloat, .leftfloat_h: hover, .lf, .lf_h: hover { float: left; }
.rightfloat, .rightfloat_h: hover, .rf, .rf_h: hover { float: right; }
.nofloat, .nofloat_h: hover, .nf, .nf_h: hover { float: none; }
PLUG-IN 3: Background Colors
This group of classes illustrates the power of the plug-ins because they provide six different ways of changing the background color of an object to any of 21 different colors. Figure 3-3 shows six objects, with each using one of the different methods of changing the background color. In the first three, the entire element is modified, while in the second three only links that are contained within the element are affected.
As you hover over and/or click the different links, you will see the color change for the whole element in lines 2 and 3, but only for the link part in lines 5 and 6. As with all the examples, the one used to create this screen grab is downloadable from the companion web site at plugincss.com.
Classes and Properties
FIGURE 3-3 This plug-in group offers many different ways of changing background colors.
About the Classes
This plug-in group has 21 main classes, with six different types of each that can be selected by choosing the required suffix. The preceding Classes and Properties table lists the available colors. Here is what the suffixes do:
• _b Used to refer to a background property.
• _ba Used to refer only to the background property of an object that is active (in other words, that is in the process of being clicked).
• _bh Used to refer only to the background property of an object that the mouse is hovering over.
• _lb Used to refer only to the background property of a link within the object.
• _lba Used to refer only to the background property of a link within the object that is actively being clicked.
• _lbh Used to refer only to the background property of a link within the object over which the mouse is hovering.
How to Use Them
When you wish to change the background color of an object, first choose the color out of the 21 in the Classes and Properties table, and then decide when the color should be applied. So, let’s assume you want to change the background color of an object to gold. To do this, you only need to use some simple HTML such as this:
<div class='gold_b'>This element has a gold background</div>
Or, if you wish the background color to change to orange, but only when the mouse is over it, you might use the following code:
<div class='orange_bh'>This element turns orange when moused over</div>
Then again, perhaps you would like the background to change color only when it is clicked. In which case, you might use code such as this:
<div class='purple_ba'>This element turns purple when clicked</div>
Or you can be really creative and combine all three effects into one, like this:
<div class='gold_b orange_bh purple_ba'>This element has a gold background that turns orange when hovered over and purple when clicked</div>
Changing Links within the Object
Sometimes you won’t want to change the background color of an entire object, but may wish to do so for any links it contains, and you can do this using HTML such as the following:
<div class='gold_lb'>This element has a plain background. <a href='#'>And this link has a gold background</a></div>
Or all three types of color change can be applied to just the links within an object, like this:
<div class='gold_lb orange_lbh purple_lba'>This element has a plain background. <a href='#'>And this link has a gold background that turns orange when hovered over and purple when clicked</a></div>
Here’s the HTML used to create the screen grab in Figure 3-3:
<div class='aqua_b' >This is text. <a href='#'>This is a link</a>.</div> <div class='aqua_ba' >This is text. <a href='#'>This is a link</a>.</div> <div class='aqua_bh' >This is text. <a href='#'>This is a link</a>.</div> <div class='aqua_lb' >This is text. <a href='#'>This is a link</a>.</div> <div class='aqua_lba'>This is text. <a href='#'>This is a link</a>.</div> <div class='aqua_lbh'>This is text. <a href='#'>This is a link</a>.</div>
As you can see, these classes provide a great deal of interactive functionality, with no need for writing JavaScript programs or creating your own CSS rules.
TIP Try downloading the example file from the companion web site and clicking on (and hovering over) different parts of each element to get a feel for how the different suffixes work.
The Classes
.aqua_b, .aqua_ba:active, .aqua_bh:hover,
.aqua_lb a, .aqua_lba a:active, .aqua_lbh a:hover {background:#0ff}
.black_b, .black_ba:active, .black_bh:hover,
.black_lb a, .black_lba a:active, .black_lbh a:hover {background:#000}
.blue_b, .blue_ba:active, .blue_bh:hover,
.blue_lb a, .blue_lba a:active, .blue_lbh a:hover {background:#00f}
.brown_b, .brown_ba:active, .brown_bh:hover,
.brown_lb a, .brown_lba a:active, .brown_lbh a:hover {background:#c44}
.fuchsia_b, .fuchsia_ba:active, .fuchsia_bh:hover,
.fuchsia_lb a,.fuchsia_lba a:active,.fuchsia_lbh a:hover{background:#f0f}
.gold_b, .gold_ba:active, .gold_bh:hover,
.gold_lb a, .gold_lba a:active, .gold_lbh a:hover {background:#fc0}
.gray_b, .gray_ba:active, .gray_bh:hover,
.gray_lb a, .gray_lba a:active, .gray_lbh a:hover {background:#888}
.green_b, .green_ba:active, .green_bh:hover,
.green_lb a, .green_lba a:active, .green_lbh a:hover {background:#080}
.khaki_b, .khaki_ba:active, .khaki_bh:hover,
.khaki_lb a, .khaki_lba a:active, .khaki_lbh a:hover {background:#cc8}
.lime_b, .lime_ba:active, .lime_bh:hover,
.lime_lb a, .lime_lba a:active, .lime_lbh a:hover {background:#0f0}
.maroon_b, .maroon_ba:active, .maroon_bh:hover,
.maroon_lb a, .maroon_lba a:active, .maroon_lbh a:hover {background:#800}
.navy_b, .navy_ba:active, .navy_bh:hover,
.navy_lb a, .navy_lba a:active, .navy_lbh a:hover {background:#008}
.olive_b, .olive_ba:active, .olive_bh:hover,
.olive_lb a, .olive_lba a:active, .olive_lbh a:hover {background:#880}
.orange_b, .orange_ba:active, .orange_bh:hover,
.orange_lb a, .orange_lba a:active, .orange_lbh a:hover {background:#f80}
.pink_b, .pink_ba:active, .pink_bh:hover,
.pink_lb a, .pink_lba a:active, .pink_lbh a:hover {background:#f88}
.purple_b, .purple_ba:active, .purple_bh:hover,
.purple_lb a, .purple_lba a:active, .purple_lbh a:hover {background:#808}
.red_b, .red_ba:active, .red_bh:hover,
.red_lb a, .red_lba a:active, .red_lbh a:hover {background:#f00}
.silver_b, .silver_ba:active, .silver_bh:hover,
.silver_lb a, .silver_lba a:active, .silver_lbh a:hover {background:#ccc}
.teal_b, .teal_ba:active, .teal_bh:hover,
.teal_lb a, .teal_lba a:active, .teal_lbh a:hover {background:#088}
.white_b, .white_ba:active, .white_bh:hover,
.white_lb a, .white_lba a:active, .white_lbh a:hover {background:#fff}
.yellow_b, .yellow_ba:active, .yellow_bh:hover,
.yellow_lb a, .yellow_lba a:active, .yellow_lbh a:hover {background:#ff0}
PLUG-IN 4: Gradients
Most modern browsers already support graduated background fills (with the surprising exception of Opera, which is usually very good at supporting web standards). Therefore, the classes in this group can be used to easily create gradient effects. And even Opera doesn’t look too bad as it defaults to a single color average of the gradient.
Figure 3-4 shows a selection of gradients being applied to objects with the same suffixes as used by the solid color background classes (such as aqua_b).
Classes and Properties
FIGURE 3-4 Applying gradient backgrounds is easy with these classes.
About the Classes
This plug-in group has 15 main classes, with six different types of each that can be selected by choosing the required suffix. The preceding Classes and Properties table lists the available gradients. Here is what the suffixes do:
• (no suffix) Without a suffix, the object’s background gradient will be set to the color supplied.
• _a This suffix is used to refer only to the background gradient of an object that is active (in other words, that is in the process of being clicked).
• _h This suffix is used to refer only to the background gradient of an object that the mouse is hovering over.
• _l This suffix is used to refer only to the background gradient of a link within the object.
• _la This suffix is used to refer only to the background gradient of a link within the object that is actively being clicked.
• _lh This suffix is used to refer only to the background gradient of a link within the object over which the mouse is hovering.
There is no _b suffix since gradients are background-only properties anyway. Therefore, all the other suffixes are a little shorter than those used for the solid colors in the previous plug-in group.
The property used to achieve the gradient (or solid fallback color) background is the background property. In the case of the Apple Safari and Google Chrome browsers, it is passed a string that looks like this:
background:-webkit-gradient(linear, left top, left bottom, from(#f44), to(#922));
This tells those browsers to create a linear gradient fill, starting at the top left of the object and continuing to the bottom left, starting with the color #f44, slowly graduating to the color #922.
Firefox and other Mozilla-based browsers require the following string format to be applied to the property:
background:-moz-linear-gradient(top, #f44, #922);
While all other browsers (and all future browsers once it is made the international standard) should send a string such as this:
background:linear-gradient(left top, #f44, #922);
Microsoft, often the odd one out, takes quite a different approach, so it is necessary to pass a string such as the following to its filter property:
filter:progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f04040', endColorstr='#902020'),
Also, for those browsers that do not support gradients, a simple solid color string such as #d33 is provided before any of the preceding lines, so that if all the gradient rules fail, at least the simple color setting will remain active.
The downside of all this, as you will often see as you progress through this book, is that all the browsers have to be catered to and, therefore, all the different strings must be applied for each gradient. This means that the CSS rules end up quite large. But then again, because all the work has already been done for you, all you need to do is include the CSS file and use simple class names in your HTML—you can forget about how cumbersome some of the rules are.
How to Use Them
You apply a gradient in much the same way as a solid background color. For example, to set the background gradient of an object to the water1 gradient, you might use HTML such as this:
<div class='water1'>This is the water1 gradient</div>
As with the solid-colored backgrounds, you can also choose when a gradient is to be applied according to whether an object is moused over or clicked, and also whether the object contains any links that should have their gradients changed.
Here’s the HTML code used to create the screen grab in Figure 3-4:
<div class='carrot1'>This is carrot1</div><br /> <div class='sky1_h'>This is plain - or sky1 when the mouse hovers over it</div><br /> <div class='grass1_a'>This is plain - or grass1 when it is clicked</div><br /> <div class='carrot1_l'>This is plain. <a href='#'>This link is carrot1</a></div><br /> <div class='water1_lh'>This is plain. <a href='#'>This link is water1 when hovered</a></div><br /> <div class='tin1_la'>This is plain. <a href='#'>This link is tin1 when clicked</a></div>
It is very similar to the example in the previous plug-in group, in that the first three objects have their entire background gradient set, while the second three have only the links contained within them changed.
Incidentally, if you are wondering why all these class names end with the number 1, it’s because there’s a complementary set of gradients that fade in the other vertical direction, in the following plug-in group.
NOTE These classes degrade gracefully, so older browsers that do not support gradient backgrounds, and the current version of Opera (10.6 as I write) will simply show a solid background representative of the average gradient color when you use them. Hopefully, Opera will support this feature soon.
The Classes
.carrot1, .carrot1_a: active, .carrot1_h:hover,
.carrot1_l a, .carrot1_la a:active, .carrot1_lh a:hover {
background:#ea4;
background:-webkit-gradient(linear, left top, left bottom,
from(#fd8), to(#c60));
background:-moz-linear-gradient(top, #fd8, #c60);
background:linear-gradient(left top, #fd8, #c60);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f0d080', endColorstr='#c06000'),
}
.chrome1, .chrome1_a:active, .chrome1_h:hover,
.chrome1_l a, .chrome1_la a:active, .chrome1_lh a:hover {
background:#ddd;
background:-webkit-gradient(linear, left top, left bottom,
from(#fff), to(#aaa));
background:-moz-linear-gradient(top, #fff, #aaa);
background:linear-gradient(left top, #fff, #aaa);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f0f0f0', endColorstr='#a0a0a0'),
}
.coffee1, .coffee1_a:active, .coffee1_h:hover,
.coffee1_l a, .coffee1_la a:active, .coffee1_lh a:hover {
background:#c94;
background:-webkit-gradient(linear, left top, left bottom,
from(#fc6), to(#752));
background:-moz-linear-gradient(top, #fc6, #752);
background:linear-gradient(left top, #fc6, #752);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f0c060', endColorstr='#705020'),
}
.dusk1, .dusk1_a:active, .dusk1_h:hover,
.dusk1_l a, .dusk1_la a:active, .dusk1_lh a:hover {
background:#79c;
background:-webkit-gradient(linear, left top, left bottom,
from(#8ad), to(#357));
background:-moz-linear-gradient(top, #8ad, #357);
background:linear-gradient(left top, #8ad, #357);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#80a0d0', endColorstr='#305070'),
}
.earth1, .earth1_a:active, .earth1_h:hover,
.earth1_l a, .earth1_la a:active, .earth1_lh a:hover {
background:#a86;
background:-webkit-gradient(linear, left top, left bottom,
from(#db8), to(#532));
background:-moz-linear-gradient(top, #db8, #532);
background:linear-gradient(left top, #db8, #532);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#d0b080', endColorstr='#503020'),
}
.fire1, .fire1_a:active, .fire1_h:hover,
.fire1_l a, .fire1_la a:active, .fire1_lh a:hover {
background:#db3;
background:-webkit-gradient(linear, left top, left bottom,
from(#ef5), to(#b40));
background:-moz-linear-gradient(top, #ef5, #b40);
background:linear-gradient(left top, #ef5, #b40);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#e0f050', endColorstr='#b04000'),
}
.grass1, .grass1_a:active, .grass1_h:hover,
.grass1_l a, .grass1_la a:active, .grass1_lh a:hover {
background:#7b6;
background:-webkit-gradient(linear, left top, left bottom,
from(#ae9), to(#160));
background:-moz-linear-gradient(top, #ae9, #160);
background:linear-gradient(left top, #ae9, #160);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#a0e090', endColorstr='#106000'),
}
.iron1, .iron1_a:active, .iron1_h:hover,
.iron1_l a, .iron1_la a:active, .iron1_lh a:hover {
background:#777;
background:-webkit-gradient(linear, left top, left bottom,
from(#999), to(#333));
background:-moz-linear-gradient(top, #999, #333);
background:linear-gradient(left top, #999, #333);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#909090', endColorstr='#303030'),
}
.plum1, .plum1_a:active, .plum1_h:hover,
.plum1_l a, .plum1_la a:active, .plum1_lh a:hover {
background:#969;
background:-webkit-gradient(linear, left top, left bottom,
from(#b8a), to(#636));
background:-moz-linear-gradient(top, #b8a, #636);
background:linear-gradient(left top, #b8a, #636);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#b080a0', endColorstr='#603060'),
}
.rose1, .rose1_a:active, .rose1_h:hover,
.rose1_l a, .rose1_la a:active, .rose1_lh a:hover {
background:#e45;
background:-webkit-gradient(linear, left top, left bottom,
from(#f67), to(#b12));
background:-moz-linear-gradient(top, #f67, #b12);
background:linear-gradient(top, #f67, #b12);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f06070', endColorstr='#b01020'),
}
.sky1, .sky1_a:active, .sky1_h:hover,
.sky1_l a, .sky1_la a:active, .sky1_lh a:hover {
background:#abe;
background:-webkit-gradient(linear, left top, left bottom,
from(#cdf), to(#68c));
background:-moz-linear-gradient(top, #cdf, #68c);
background:linear-gradient(left top, #cdf, #68c);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#c0d0f0', endColorstr='#6080c0'),
}
.sunset1, .sunset1_a:active, .sunset1_h:hover,
.sunset1_l a, .sunset1_la a:active, .sunset1_lh a:hover {
background:#ed3;
background:-webkit-gradient(linear, left top, left bottom,
from(#fe4), to(#ca0));
background:-moz-linear-gradient(top, #fe4, #ca0);
background:linear-gradient(left top, #fe4, #ca0);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f0e040', endColorstr='#c0a000'),
}
.tin1, .tin1_a:active, .tin1_h:hover,
.tin1_l a, .tin1_la a:active, .tin1_lh a:hover {
background:#aaa;
background:-webkit-gradient(linear, left top, left bottom,
from(#bbb), to(#777));
background:-moz-linear-gradient(top, #bbb, #777);
background:linear-gradient(left top, #bbb, #777);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#b0b0b0', endColorstr='#707070'),
}
.water1, .water1_a:active, .water1_h:hover,
.water1_l a, .water1_la a:active, .water1_lh a:hover {
background:#ace;
background:-webkit-gradient(linear, left top, left bottom,
from(#eff), to(#58c));
background:-moz-linear-gradient(top, #eff, #58c);
background:linear-gradient(left top, #eff, #58c);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#e0f0f0', endColorstr='#5080c0'),
}
.wine1, .wine1_a:active, .wine1_h:hover,
.wine1_l a, .wine1_la a:active, .wine1_lh a:hover {
background:#d33;
background:-webkit-gradient(linear, left top, left bottom,
from(#f44), to(#922));
background:-moz-linear-gradient(top, #f44, #922);
background:linear-gradient(left top, #f44, #922);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#f04040', endColorstr='#902020'),
}
PLUG-IN 5: Inverse Gradients
The classes in this plug-in group are the inverse of the ones in the previous section in that they create background gradient fills that look as if the previous fills were flipped from top to bottom. They are particularly useful as mouseover or button click effects as can be seen in Figure 3-5, which is an updated version of the example in the previous plug-in group that now alternates gradients when clicked and/or hovered over.
FIGURE 3-5 Using complementary gradient pairs for link and hover effects
Notice how the second set of links does not show any gradients. This is due to an unfortunate bug in Internet Explorer (the browser used for the screen grab), and serves to illustrate how these classes will degrade gracefully when they cannot be applied to their fullest effect. In any case, with a little extra HTML, it is easy to work around this IE bug by using only the first three types of class that assign gradients to an entire object—then Opera will be the only browser unable to show them (but it will at least still display a solid color representative of the gradient).
Classes and Properties
About the Classes
These classes are almost identical to those in the previous plug-in group except that they have a number 2 in them instead of a 1, and they display gradients that are the inverse from top to bottom.
How to Use Them
You can use these classes in the same way as the first set of gradients, or use them to make cool mouseover effects like in the following example, which is an extension of the one in the previous plug-in group that swaps the gradients when moused over and/or clicked:
<div class='carrot2'>This is carrot2</div><br /> <div class='sky1 sky2_h'>This is sky1 - or sky2 when the mouse hovers over it</div><br /> <div class='grass1 grass2_a'>This is grass1 - or grass2 when it is clicked</div><br /> <div class='carrot2_l'>This is plain. <a href='#'>This link is carrot2</a></div><br /> <div class='water1_l water2_lh'>This is plain. <a href='#'>This link is water1 or water2 when hovered</a></div><br /> <div class='tin1_l tin2_la'>This is plain. <a href='#'>This link is tin1 or tin2 when clicked</a></div>
Already, these are some quite impressive effects, but now take a look at what you can do with the HTML <button> tag:
<button class='sky1 sky2_a'>Please click me</button>
When you click buttons that use gradient classes in this way, they appear to depress even more than normal and produce a highly professional looking effect.
CAUTION Unfortunately, Microsoft Internet Explorer has a bug—one of many in fact—such that the second set of three objects in the example (in which links within an object are addressed) will not show as gradients. For some reason, Internet Explorer balks at CSS rules like .classname a { filter:…; }, and refuses to apply the filter (although it will apply other styles), so only the background solid color will be applied for these objects. Curiously, IE works fine with rules such as .classname { filter:…; }—hopefully this will be addressed in version 9. Anyway, until it is corrected, this is one example of how the classes sometimes have to gracefully degrade in certain situations.
The Classes
.carrot2, .carrot2_a:active, .carrot2_h:hover,
.carrot2_l a, .carrot2_la a:active, .carrot2_lh a:hover {
background:#d93;
background:linear-gradient(left top, #c60, #fd8);
background:-webkit-gradient(linear, left top, left bottom,
from(#c60), to(#fd8));
background:-moz-linear-gradient(top, #c60, #fd8);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#c06000', endColorstr='#f0d080'),
}
.chrome2, .chrome2_a:active, .chrome2_h:hover,
.chrome2_l a, .chrome2_la a:active, .chrome2_lh a:hover {
background:#ccc;
background:linear-gradient(left top, #aaa, #fff);
background:-webkit-gradient(linear, left top, left bottom,
from(#aaa), to(#fff));
background:-moz-linear-gradient(top, #aaa, #fff);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#a0a0a0', endColorstr='#f0f0f0'),
}
.coffee2, .coffee2_a:active, .coffee2_h:hover,
.coffee2_l a, .coffee2_la a:active, .coffee2_lh a:hover {
background:#b83;
background:linear-gradient(left top, #752, #fc6);
background:-webkit-gradient(linear, left top, left bottom,
from(#752), to(#fc6));
background:-moz-linear-gradient(top, #752, #fc6);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#705020', endColorstr='#f0c060'),
}
.dusk2, .dusk2_a:active, .dusk2_h:hover,
.dusk2_l a, .dusk2_la a:active, .dusk2_lh a:hover {
background:#68b;
background:linear-gradient(left top, #357, #8ad);
background:-webkit-gradient(linear, left top, left bottom,
from(#357), to(#8ad));
background:-moz-linear-gradient(top, #357, #8ad);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#305070', endColorstr='#80a0d0'),
}
.earth2, .earth2_a:active, .earth2_h:hover,
.earth2_l a, .earth2_la a:active, .earth2_lh a:hover {
background:#975;
background:linear-gradient(left top, #532, #db8);
background:-webkit-gradient(linear, left top, left bottom,
from(#532), to(#db8));
background:-moz-linear-gradient(top, #532, #db8);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#503020', endColorstr='#d0b080'),
}
.fire2, .fire2_a:active, .fire2_h:hover,
.fire2_l a, .fire2_la a:active, .fire2_lh a:hover {
background:#ca2;
background:linear-gradient(left top, #b40, #ef5);
background:-webkit-gradient(linear, left top, left bottom,
from(#b40), to(#ef5));
background:-moz-linear-gradient(top, #b40, #ef5);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#b04000', endColorstr='#e0f050'),
}
.grass2, .grass2_a:active, .grass2_h:hover,
.grass2_l a, .grass2_la a:active, .grass2_lh a:hover {
background:#6a5;
background:linear-gradient(left top, #160, #ae9);
background:-webkit-gradient(linear, left top, left bottom,
from(#160), to(#ae9));
background:-moz-linear-gradient(top, #160, #ae9);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#106000', endColorstr='#aaee99'),
}
.iron2, .iron2_a:active, .iron2_h:hover,
.iron2_l a, .iron2_la a:active, .iron2_lh a:hover {
background:#666;
background:linear-gradient(left top, #333, #999);
background:-webkit-gradient(linear, left top, left bottom,
from(#333), to(#999));
background:-moz-linear-gradient(top, #333, #999);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#303030', endColorstr='#909090'),
}
.plum2, .plum2_a:active, .plum2_h:hover,
.plum2_l a, .plum2_la a:active, .plum2_lh a:hover {
background:#858;
background:linear-gradient(left top, #636, #b8a);
background:-webkit-gradient(linear, left top, left bottom,
from(#636), to(#b8a));
background:-moz-linear-gradient(top, #636, #b8a);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#603060', endColorstr='#b080a0'),
}
.rose2, .rose2_a:active, .rose2_h:hover,
.rose2_l a, .rose2_la a:active, .rose2_lh a:hover {
background:#d34;
background:linear-gradient(left top, #b12, #f67);
background:-webkit-gradient(linear, left top, left bottom,
from(#b12), to(#f67));
background:-moz-linear-gradient(top, #b12, #f67);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#b01020', endColorstr='#f06070'),
}
.sky2, .sky2_a:active, .sky2_h:hover,
.sky2_l a, .sky2_la a:active, .sky2_lh a:hover {
background:#9ad;
background:linear-gradient(left top, #68c, #cdf);
background:-webkit-gradient(linear, left top, left bottom,
from(#68c), to(#cdf));
background:-moz-linear-gradient(top, #68c, #cdf);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#6080c0', endColorstr='#c0d0f0'),
}
.sunset2, .sunset2_a:active, .sunset2_h:hover,
.sunset2_l a, .sunset2_la a:active, .sunset2_lh a:hover {
background:#dc2;
background:linear-gradient(left top, #ca0, #fe4);
background:-webkit-gradient(linear, left top, left bottom,
from(#ca0), to(#fe4));
background:-moz-linear-gradient(top, #ca0, #fe4);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#c0a000', endColorstr='#f0e040'),
}
.tin2, .tin2_a:active, .tin2_h:hover,
.tin2_l a, .tin2_la a:active, .tin2_lh a:hover {
background:#999;
background:linear-gradient(left top, #777, #bbb);
background:-webkit-gradient(linear, left top, left bottom,
from(#777), to(#bbb));
background:-moz-linear-gradient(top, #777, #bbb);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#707070', endColorstr='#b0b0b0'),
}
.water2, .water2_a:active, .water2_h:hover,
.water2_l a, .water2_la a:active, .water2_lh a:hover {
background:#9bd;
background:linear-gradient(left top, #58c, #eff);
background:-webkit-gradient(linear, left top, left bottom,
from(#58c), to(#eff));
background:-moz-linear-gradient(top, #58c, #eff);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#5080c0', endColorstr='#e0f0f0'),
}
.wine2, .wine2_a:active, .wine2_h:hover,
.wine2_l a, .wine2_la a:active, .wine2_lh a:hover {
background:#c22;
background:linear-gradient(left top, #922, #f44);
background:-webkit-gradient(linear, left top, left bottom,
from(#922), to(#f44));
background:-moz-linear-gradient(top, #922, #f44);
filter :progid:DXImageTransform.Microsoft.Gradient(
startColorstr='#902020', endColorstr='#f04040'),
}
PLUG-IN 6: Box Shadows
Adding a shadow effect underneath images and other objects helps them stand out. Using the classes in this plug-in group, you can add box shadows of five different shades in six different ways.
Figure 3-6 shows a photograph repeated six times. The first copy has no box shadow, while the other five range from the lightest to the darkest box shadow. This screen grab was taken using Internet Explorer, which doesn’t support blurring. All other browsers blur and round the edges of box shadows, providing a smoother effect.
Classes and Properties
About the Classes
This group has five classes, each of which is supplied with the standard suffixes used to change the way they act: _a for active, _h for hover, _l for a link, _la for an active link, and _lh for a hovered link.
The box shadow is applied using the box-shadow CSS property, or –moz-box-shadow for Mozilla-based browsers such as Firefox, or –webkit-box-shadow for Safari and Chrome. In all cases, the values passed are the shadow color, its vertical and horizontal offset from the object, and the amount of blurring to use. So a typical box shadow rule looks like this:
box-shadow :#444444 4px 4px 6px;
On Internet Explorer, box shadowing is handled by the filter property and the equivalent CSS rule is as follows:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#444444', Direction=135, Strength=6);
FIGURE 3-6 Adding box shadows makes objects stand out from the page.
TIP If you are interested in tweaking the PC.css file, there is also a DropShadow filter argument available in Internet Explorer that provides a different effect and which is identical in use to the Shadow argument, except for the extra four letters preceding the word Shadow. You could therefore use it in the following way:
filter:progid:DXImageTransform.Microsoft.DropShadow(color='#444444', Direction=135, Strength=6);
How to Use Them
To add a box shadow to an object, enter its class name into some HTML, like this:
<img class='boxshadow' src='photo1.jpg' />
You can also choose any of the four lighter or darker variants, or add one of the action suffixes to change the way the box shadow is implemented. For example, to add a darker box shadow to an object when it is being hovered over, you might do this:
<img class='darkboxshadow_h' src='photo1.jpg' />
Or you could combine the two to give an object a lighter box shadow that changes to a darker one when hovered over, like this:
<img class='lightboxshadow darkboxshadow_h ' src='photo1.jpg' />
Here is the HTML that was used to create the screen grab in Figure 3-6:
<div class='black_bh' style='padding:10px;'> <img src='photo1.jpg' /> <img class='lightestboxshadow' src='photo1.jpg' /> <img class='lightboxshadow' src='photo1.jpg' /> <br /><br /> <img class='boxshadow' src='photo1.jpg' /> <img class='darkboxshadow' src='photo1.jpg' /> <img class='darkestboxshadow' src='photo1.jpg' /> </div>
In this example, there are six instances of a photo: one with no box shadow, and five more with shadows of varying shades. A few and <br /> tags are used to neatly space them out.
Enclosing these photos is a <div> tag that has been set to change its background color to black when hovered over (using the black_bh class), so you can pass the mouse over it and see the effect of the lighter shadows when used on a dark background.
The Classes
.boxshadow, .boxshadow_a:active,
.boxshadow_h:hover, .boxshadow_l a,
.boxshadow_la a:active, .boxshadow_lh a:hover {
-moz-box-shadow :#888888 4px 4px 6px;
-webkit-box-shadow:#888888 4px 4px 6px;
box-shadow :#888888 4px 4px 6px;
filter :progid:DXImageTransform.Microsoft.Shadow(
color='#888888', Direction=135, Strength=6);
}
.lightestboxshadow, .lightestboxshadow_a:active,
.lightestboxshadow_h:hover, .lightestboxshadow_l a,
.lightestboxshadow_la a:active, .lightestboxshadow_lh a:hover {
-moz-box-shadow :#ffffff 4px 4px 6px;
-webkit-box-shadow:#ffffff 4px 4px 6px;
box-shadow :#ffffff 4px 4px 6px;
filter :progid:DXImageTransform.Microsoft.Shadow(
color='#cccccc', Direction=135, Strength=6);
}
.lightboxshadow, .lightboxshadow_a:active,
.lightboxshadow_h:hover, .lightboxshadow_l a,
.lightboxshadow_la a:active, .lightboxshadow_lh a:hover {
-moz-box-shadow :#cccccc 4px 4px 6px;
-webkit-box-shadow:#cccccc 4px 4px 6px;
box-shadow :#cccccc 4px 4px 6px;
filter :progid:DXImageTransform.Microsoft.Shadow(
color='#cccccc', Direction=135, Strength=6);
}
.darkboxshadow, .darkboxshadow_a:active,
.darkboxshadow_h:hover, .darkboxshadow_l a,
.darkboxshadow_la a:active, .darkboxshadow_lh a:hover {
box-shadow :#444444 4px 4px 6px;
-moz-box-shadow :#444444 4px 4px 6px;
-webkit-box-shadow:#444444 4px 4px 6px;
filter :progid:DXImageTransform.Microsoft.Shadow(
color='#444444', Direction=135, Strength=6);
}
.darkestboxshadow, .darkestboxshadow_a:active,
.darkestboxshadow_h:hover, .darkestboxshadow_l a,
.darkestboxshadow_la a:active, .darkestboxshadow_lh a:hover {
-moz-box-shadow :#000000 4px 4px 6px;
-webkit-box-shadow:#000000 4px 4px 6px;
box-shadow :#000000 4px 4px 6px;
filter :progid:DXImageTransform.Microsoft.Shadow(
color='#000000', Direction=135, Strength=6);
}
PLUG-IN 7: Padding
When you need to quickly add some padding around an object, as long as you’re happy to use values of 2, 5, 8, 11, or 15 pixels, you can simply drop one of the class names in this group into your HTML.
For example, Figure 3-7 shows the example from the previous plug-in group modified so that each picture has a different amount of padding. A border has been added to each to make it clear how much padding has been applied.
FIGURE 3-7 Applying different padding classes to a photograph
Classes and Properties
About the Classes
This group has five classes, and each is supplied with the standard suffixes used to change the way they act: _a for active, _h for hover, _l for a link, _la for an active link, and _lh for a hovered link. Padding is applied using the padding CSS property, with values of 2px, 5px, 8px, 11px, or 15px, like this:
padding:8px;
How to Use Them
Using the padding classes is as easy as choosing the size you need and using that classname in a class=’…’ argument, like this:
<img class='padding' src='photo1.jpg' />
You can add padding to most objects, not just images. You can also choose to use any of the dynamic versions of these classes. For example, to give an object a small padding and then enlarge it when the mouse hovers over it, you could use code such as this:
<img class='smallpadding largepadding_h' src='photo1.jpg' />
Or to change the padding only when the object is clicked, you could use:
<img class='smallpadding largepadding_a' src='photo1.jpg' />
And, of course, there are also the classes for modifying only links within an object, like the following, which applies a small padding to any such links, and which changes to a larger padding when the link is hovered over:
<img class='smallpadding_l largepadding_lh' src='photo1.jpg' />
Here is the HTML used to create the page shown in Figure 3-7:
<img border='1' src='photo1.jpg' /> <img border='1' class='smallestpadding' src='photo1.jpg' /> <img border='1' class='smallpadding' src='photo1.jpg' /> <br /><br /> <img border='1' class='padding' src='photo1.jpg' /> <img border='1' class='largepadding' src='photo1.jpg' /> <img border='1' class='largestpadding' src='photo1.jpg' />
The Classes
.padding, .padding_a :active,
.padding_h :hover, .padding_l a,
.padding_la a:active, .padding_lh a:hover
{ padding:8px; }
.smallestpadding, .smallestpadding_a: active,
.smallestpadding_h :hover, .smallestpadding_l a,
.smallestpadding_la a:active, .smallestpadding_lh a:hover
{ padding :2px; }
.smallpadding, .smallpadding_a:active,
.smallpadding_h :hover, .smallpadding_l a,
.smallpadding_la a:active, .smallpadding_lh a:hover
{ padding :5px; }
.largepadding, .largepadding_a:active,
.largepadding_h :hover, .largepadding_l a,
.largepadding_la a:active, .largepadding_lh a:hover
{ padding :11px; }
.largestpadding, .largestpadding_a:active,
.largestpadding_h :hover, .largestpadding_l a,
.largestpadding_la a:active, .largestpadding_lh a:hover
{ padding :15px; }
PLUG-IN 8: Rounded Borders
You can create rounded borders in many ways, from using images and image parts, to table cells, nested elements, and so on. Generally, they are quite complicated to use, but thankfully the new CSS 3 border-radius command is supported on all browsers except Internet Explorer, and even that browser can handle them from version 9 on, as can be seen in Figure 3-8, which shows a screen grab from the IE 9 Platform Preview.
FIGURE 3-8 These rounded borders work on all modern browsers, including IE 9.
Classes and Properties
About the Classes
This group has five classes, each of which is supplied with the standard suffixes used to change the way they act: _a for active, _h for hover, _l for a link, _la for an active link, and _lh for a hovered link.
The rounded border is applied using the border-radius CSS property, or -moz-border-radius for Mozilla-based browsers such as Firefox, or -webkit-border-radius for Safari and Chrome. In all cases, a pixel value is passed, like this CSS rule:
border-radius:10px;
Interestingly, Internet Explorer was late to the game in supporting rounded borders, but today it actually does a better job than the other browsers because if the object is an image it also gets slightly rounded at the corners, whereas other browsers leave the images untouched. I suppose it could be argued that this is a case of Microsoft doing things in a nonstandard way again, but I like their approach to this feature.
How to Use Them
To add a rounded border to an object, you must first ensure that a border has been enabled. This can be done the old-fashioned way in images with an argument such as border=’1’, or via CSS such as border:1px solid; (or using the border classes later in this chapter).
Once a border is visible, you can round it off by including one of the classes, like this:
<img border='1' class='round padding' src='photo1.jpg' />
This will add a rounded border with a radius of 10 pixels. You can choose smaller or larger radii and also use the various standard suffixes to change the border only when clicked or hovered over, or only when it is part of a link within the current object.
Here is the HTML used to create Figure 3-8:
<img border='1' class='padding' src='photo1.jpg' /> <img border='1' class='smallestround padding' src='photo1.jpg' /> <img border='1' class='smallround padding' src='photo1.jpg' /> <br /><br /> <img border='1' class='round padding' src='photo1.jpg' /> <img border='1' class='largeround padding' src='photo1.jpg' /> <img border='1' class='largestround padding' src='photo1.jpg' />
The Classes
.round, .round_a: active,
.round_h:hover, .round_l a,
.round_la a:active, .round_lh a :hover {
border-radius :10px;
-moz-border-radius :10px;
-webkit-border-radius:10px;
}
.smallestround, .smallestround_a:active,
.smallestround_h:hover, .smallestround_l a,
.smallestround_la a:active, .smallestround_lh a:hover {
border-radius :2px;
-moz-border-radius :2px;
-webkit-border-radius:2px;
}
.smallround, .smallround_a:active,
.smallround_h:hover, .smallround_l a,
.smallround_la a:active, .smallround_lh a:hover {
border-radius :5px;
-moz-border-radius :5px;
-webkit-border-radius:5px;
}
.largeround, .largeround_a:active,
.largeround_h:hover, .largeround_l a,
.largeround_la a:active, .largeround_lh a:hover {
border-radius :15px;
-moz-border-radius :15px;
-webkit-border-radius:15px;
}
.largestround, .largestround_a:active,
.largestround_h:hover, .largestround_l a,
.largestround_la a:active, .largestround_lh a:hover {
border-radius :20px;
-moz-border-radius :20px;
-webkit-border-radius:20px;
}
PLUG-IN 9: Transparency
The ability to change the transparency of an object opens up a wide range of professional effects, and the classes in this plug-in group make doing so very easy. For example, Figure 3-9 shows a photograph displayed at 11 different levels of transparency.
FIGURE 3-9 You can vary the transparency of objects with these classes.
Classes and Properties
About the Classes
Transparency, or more precisely the inverse of it, opacity, is one area that most of the browser developers caught up with a while ago, so there is no need to use property names such as -moz-opacity or -webkit-opacity. Instead, the single property opacity is all that is required, as in the following CSS rule, which sets the opacity of an object to 50 percent:
opacity:0.5;
Of course, Microsoft always likes to be different, so Internet Explorer uses the filter property instead, like this (with a value between 0 and 100, rather than 0 and 1):
filter:alpha(opacity = '50'),
How to Use Them
You can change the opacity of an object by selecting the class name you want out of the 11 levels between 0 and 100 percent. Then, you can optionally choose a suffix to determine how the change should be made, as with the following code, which sets the transparency of a photograph to 50 percent:
<img class='trans05' src='photo2.jpg' />
A neat trick you can utilize for highlighting photos is to also provide a different level of transparency when a picture is hovered over, as with the following example, which changes the transparency of the photo to zero percent (or solid) when the mouse passes over it:
<img class='trans05 trans00_h' src='photo2.jpg' />
You can also use the other standard suffixes to change the transparency when an object is clicked, or only for links within an object.
Here is the HTML used to create Figure 3-9:
<img class='trans00' src='photo2.jpg' /> <img class='trans01 trans00_h' src='photo2.jpg' /> <img class='trans02 trans01_h' src='photo2.jpg' /> <img class='trans03 trans02_h' src='photo2.jpg' /> <img class='trans04 trans03_h' src='photo2.jpg' /> <img class='trans05 trans04_h' src='photo2.jpg' /> <img class='trans06 trans05_h' src='photo2.jpg' /> <img class='trans07 trans06_h' src='photo2.jpg' /> <img class='trans08 trans07_h' src='photo2.jpg' /> <img class='trans09 trans08_h' src='photo2.jpg' /> <img class='trans10 trans09_h' src='photo2.jpg' />
With the exception of the first, when you pass the mouse over the pictures, they darken by 10 percent.
The Classes
.trans00, .trans00_a:active, .trans00_h:hover,
.trans00_l a, .trans00_la a:active, .trans00_lh a:hover {
opacity:1;
filter :alpha(opacity = '100'),
}
.trans01, .trans01_a:active, .trans01_h:hover,
.trans01_l a, .trans01_la a:active, .trans01_lh a:hover {
opacity:0.9;
filter :alpha(opacity = '90'),
}
.trans02, .trans02_a:active, .trans02_h:hover,
.trans02_l a, .trans02_la a:active, .trans02_lh a:hover {
opacity:0.8;
filter :alpha(opacity = '80'),
}
.trans03, .trans03_a:active, .trans03_h:hover,
.trans03_l a, .trans03_la a:active, .trans03_lh a:hover {
opacity:0.7;
filter :alpha(opacity = '70'),
}
.trans04, .trans04_a:active, .trans04_h:hover,
.trans04_l a, .trans04_la a:active, .trans04_lh a:hover {
opacity:0.6;
filter :alpha(opacity = '60'),
}
.trans05, .trans05_a:active, .trans05_h:hover,
.trans05_l a, .trans05_la a:active, .trans05_lh a:hover {
opacity:0.5;
filter :alpha(opacity = '50'),
}
.trans06, .trans06_a:active, .trans06_h :hover,
.trans06_l a, .trans06_la a:active, .trans06_lh a:hover {
opacity:0.4;
filter :alpha(opacity = '40'),
}
.trans07, .trans07_a:active, .trans07_h:hover,
.trans07_l a, .trans07_la a:active, .trans07_lh a:hover {
opacity:0.3;
filter :alpha(opacity = '30'),
}
.trans08, .trans08_a:active, .trans08_h:hover,
.trans08_l a, .trans08_la a:active, .trans08_lh a:hover {
opacity:0.2;
filter :alpha(opacity = '20'),
}
.trans09, .trans09_a:active, .trans09_h:hover,
.trans09_l a, .trans09_la a:active, . a:hover {
opacity:0.1;
filter :alpha(opacity = '10'),
}
.trans10, .trans10_a:active, .trans10_h:hover,
.trans10_l a, .trans10_la a:active, .trans10_lh a:hover {
opacity:0;
filter :alpha(opacity = '0'),
}
PLUG-IN 10: Visibility and Display
The classes in this plug-in group provide different ways of presenting objects, including making them visible or invisible, hidden (a different type of invisible), or positioning them either inline or as a block.
Figure 3-10 shows three images in which the first is presented normally using the visible class (which is the default for all objects). The second uses the invisible class, which retains its dimensions, as can be seen by the caption still in the correct place. The third image uses the hidden class, so it has been completely removed from display, as can be seen by the caption which has collapsed in to occupy the space released.
FIGURE 3-10 Using the visible, invisible, and hidden classes to present images
Classes and Properties
About the Classes
Unlike the transparency class of trans10 (which makes an object totally transparent but keeps its position and dimensions), when an object uses either the invisible or hidden classes, it also has no associated actions and therefore cannot be hovered over or clicked. If you try to do these things on an invisible object, the browser will ignore them. As for hidden objects, they are removed from the web page so other elements that can will move in to occupy the space released.
Therefore, none of the usual suffix versions of these classes are available. If they were, they would be completely useless. For example, if a hover class were created for hiding an object, as soon as the object disappeared a mouse out event would trigger and the object would reappear again and the process would start all over, resulting in the object appearing to flicker.
How to Use Them
The visible, invisible, and hidden classes are mostly of use for assigning initial settings to objects that you may change later using JavaScript. For example, you may wish to hide an element that should display only at the correct time, or when a certain action is performed.
Here’s some HTML that shows the effects of using the different classes:
<div style='padding:20px; border:1px solid; width:120px; height:164px;' class='leftfloat'> <img border='1' class='visible' src='photo2.jpg' />Photograph caption </div> <div style='padding:20px; border:1px solid; width:120px; height:164px;' class='leftfloat'> <img border='1' class='invisible' src='photo2.jpg'/>Photograph caption </div> <div style='padding:20px; border:1px solid; width:120px; height:164px;' class='leftfloat'> <img border='1' class='hidden' src='photo2.jpg' />Photograph caption </div>
Each image is embedded within a <div> that has 20 pixels of padding, a solid border, and is floated to the left. These act as placeholders. Then, within each <div> there is one instance each of a visible, invisible, and hidden class, each followed by a picture caption. The result is the screen grab in Figure 3-10.
Using the block and inline Classes
The other two classes in this group have the effect of giving an object either the positioning properties of a <div>, for the block class, or those of a <span> for the inline class.
Objects with a block display property start on a new line, and objects that follow them also start on a new line. Objects with an inline display property follow on from the right of the previous object, only dropping to the next line if they would extend past the right margin. Also, if there’s room, objects following after an inline object will also display to the right of it.
The tablecell and valign Classes
Sometimes it can be helpful to give an object the properties of a table cell. For example, when used in a table cell, the vertical-align property mimics the deprecated HTML valign property, so it can be used to vertically center objects inside other objects, like this:
<div class='tablecell valignmid'> This text is vertically centered </div>
You can also use the valigntop and valignbot classes in table cells.
The Classes
.visible { visibility:visible; }
.invisible { visibility:hidden; }
.hidden { display :none; }
.block { display :block; }
.inline { display :inline; }
.tablecell { display :table-cell; }
.valigntop { vertical-align:top; }
.valignmid { vertical-align:middle; }
.valignbot { vertical-align:bottom; }
PLUG-IN 11: Scroll Bars
Using the plug-ins in this group, you can decide whether and how to display scroll bars on an object that supports them. In Figure 3-11, an excerpt from a poem by William Blake is displayed in three different ways. The first instance uses forced vertical and horizontal scroll bars, the second uses no scroll bars, and the third uses automatic scroll bars—therefore, only the vertical scroll bar is visible.
FIGURE 3-11 Use these classes to choose the types of scroll bars you want.
Classes and Properties
About the Classes
These classes let you specify what to do with any content that would otherwise overflow the bounds of its containing object. You can choose to force the display of both vertical and horizontal scroll bars with the scroll class, to hide any overflow with the noscroll (or nooverflow) class, or to let the browser choose whether and which scroll bars to use with the autoscroll (or overflow) class.
The standard suffixes of _a, _h, _l, _la, and _lh are also supported to apply the change only when the mouse is hovering over an object or it is being clicked, or to apply the setting only to links within the object. There is also a new suffix available that hasn’t been seen before, _f, which is available on classes such as this that may apply to input elements. With it, you can apply the setting only to an element that has focus, such as an <input> or <textarea> that has been clicked.
How to Use Them
There are three different types of scroll bar classes: scroll, noscroll (also called nooverflow), and autoscroll (also called overflow). Once you have decided which to apply to an object and (optionally) whether to use any suffix to control the way the setting is applied, simply embed the class name as an argument in the class=’…’ section of the object declaration, like this:
<div class='autoscroll'> The contents goes here </div>
Alternatively, scroll bars are actually only required on an object when you want to scroll it, so you could choose to only display them when the mouse passes over scrollable text, like this:
<div class='autoscroll_h'> The contents goes here </div>
Or maybe you have created a <textarea> field and only want scroll bars to appear when the user clicks into it to begin typing, which you can do using the _f suffix, like this:
<textarea rows='5' cols='50' class='noscroll autoscroll_f'> The contents goes here </textarea>
In this case, it’s important that the noscroll class is used in conjunction with autoscroll_f so that the scroll bars will disappear when the object no longer has focus.
Here’s the HTML that was used to produce the screen grab in Figure 3-11:
<div class='scroll leftfloat' style='width:250px; height:180px;'> <h4>William Blake<br />Auguries of Innocence</h4> To see a world in a grain of sand,<br /> And a heaven in a wild flower,<br /> Hold infinity in the palm of your hand,<br /> And eternity in an hour.<br /><br /> A robin redbreast in a cage<br /> Puts all heaven in a rage. </div> <div class='noscroll autoscroll_h leftfloat' style='width:250px; height:180px; padding-left:20px'> <h4>William Blake<br />Auguries of Innocence</h4> To see a world in a grain of sand,<br /> And a heaven in a wild flower,<br /> Hold infinity in the palm of your hand,<br /> And eternity in an hour.<br /><br /> A robin redbreast in a cage<br /> Puts all heaven in a rage. </div> <div class='autoscroll' style='width:250px; height:180px; padding-left:20px'> <h4>William Blake<br />Auguries of Innocence</h4> To see a world in a grain of sand,<br /> And a heaven in a wild flower,<br /> Hold infinity in the palm of your hand,<br /> And eternity in an hour.<br /><br /> A robin redbreast in a cage<br /> Puts all heaven in a rage. </div>
The first instance of the poem has forced scroll bars, the second has none (but if the mouse is passed over it, an automatic vertical scroll bar will appear), and the third has an automatic vertical scroll bar.
The Classes
.scroll, .scroll_a:active, .scroll_h:hover,
.scroll_l a, .scroll_la a:active, .scroll_lh a:hover,
.scroll_f:focus
{ overflow:scroll;}
.noscroll, .noscroll_a:active, .noscroll_h:hover,
.noscroll_l a, .noscroll_la a:active, .noscroll_lh a:hover,
.nooverflow, .nooverflow_a:active, .nooverflow_h:hover,
.nooverflow_l a, .nooverflow_la a:active, .nooverflow_lh a:hover,
.noscroll_f:focus, .nooverflow_f:focus
{ overflow:hidden;}
.autoscroll, .autoscroll_a:active, .autoscroll_h:hover,
.autoscroll_l a, .autoscroll_la a:active, .autoscroll_lh a:hover,
.overflow, .overflow_a:active, .overflow_h:hover,
.overflow_l a, .overflow_la a:active, .overflow_lh a:hover,
.autoscroll_f:focus, .overflow_f:focus
{ overflow:auto; }
PLUG-IN 12: Maximum Sizes
Using these classes, you can resize an object to better fill the amount of space allocated to it by its containing object. For example, in Figure 3-12 a 250 × 167 pixel photograph is displayed in four different ways within a 500 × 100 pixel boundary, using the nooverflow class to prevent any part of the image from leaking outside of the boundary.
FIGURE 3-12 Setting an image’s dimensions to various maximum values
The first image is displayed using its default dimensions, but as it is taller than 100 pixels, the bottom half is cut off.
The second image has had its width increased to that of the containing object and, because no new size was specified for its height, the image has also been resized vertically by the browser to retain the same relative dimensions. This time most of the image is now missing.
The third image has had its height set to that of the containing object and its width has been accordingly reduced by the browser. Since the photo’s width is less than the width of the containing object, the entire image is visible.
Lastly, the final image has been resized to the width and height of the containing object and, while the whole image is in view, it has been horizontally stretched.
Classes and Properties
About the Classes
These classes apply a value of 100 percent to whichever property they refer, allowing you to set the width, height, or both dimensions to those of the containing object. Where the object being resized is an image, if only one dimension is resized the other will be automatically resized by the browser to retain the same aspect ratio.
The CSS rules used are either or both of the following:
width:100%; height:100%;
You can also use the standard suffixes to apply the change only when an object is hovered over or clicked, or only to links within an object.
How to Use Them
To change any dimensions of an object to those of its containing object, use one of the maxwidth, maxheight, or maxsize classes, like this:
<img src='photo3.jpg' class='maxwidth' />
Or, for example, if you want the object to change only its height when hovered over, you would use code such as this:
<img src='photo3.jpg' class='maxheight_h' />
To change both dimensions at once, you would use the maxsize class, like this:
<img src='photo3.jpg' class='maxsize' />
Here’s the HTML used to create Figure 3-12:
<div class='nooverflow' style='width:500px; height:100px;
border:1px solid;'>
<img src='photo3.jpg' />
</div><br />
<div class='nooverflow' style='width:500px; height:100px;
border:1px solid;'>
<img src='photo3.jpg' class='maxwidth' />
</div><br />
<div class='nooverflow' style='width:500px; height:100px;
border:1px solid;'>
<img src='photo3.jpg' class='maxheight' />
</div><br />
<div class='nooverflow' style='width:500px; height:100px;
border:1px solid;'>
<img src='photo3.jpg' class='maxsize' />
</div>
As always, this example file and its images are available for download from the companion web site at plugincss.com.
The Classes
.maxwidth, .maxwidth_a:active, .maxwidth_h:hover,
.maxwidth_l a, .maxwidth_la a:active, .maxwidth_lh a:hover
{ width :100%; }
.maxheight, .maxheight_a:active, .maxheight_h:hover
.maxheight_l a, .maxheight_la a:active, .maxheight_lh a:hover
{ height:100%; }
.maxsize, .maxsize_a:active, .maxsize_h:hover,
.maxsize_l a, .maxsize_la a:active, .maxsize_lh a:hover
{ height:100%; width:100%; }
PLUG-IN 13: Location
The classes in plug-in group 13 offer a variety of absolute and relative positioning functions. For example, in Figure 3-13 the totop, tobottom, toleft, and toright classes have been used to place four images in the corners of their containing object.
Classes and Properties
FIGURE 3-13 Moving images to the four corners of their containing object
About the Classes
These classes access the top, bottom, left, and right properties of an object to either place it in an absolute position or move it by a relative amount. The _h suffix of the class names is supported to apply the change only when an object is hovered over, while the other suffixes are not supported, since it is unlikely they would ever be used.
Some of the CSS rules used are similar to the following examples:
top:20px; left:-5px; right:0px; bottom:50px;
How to Use Them
To position an object against one or more edges of its containing object, you can use code such as the following, which was used to create Figure 3-13:
<div class='relative' style='width:500px; height:350px;'> <img class='absolute toleft totop' src='photo4.jpg' /> <img class='absolute toright totop' src='photo4.jpg' /> <img class='absolute toleft tobottom' src='photo4.jpg' /> <img class='absolute toright tobottom' src='photo4.jpg' /> </div>
This example creates a container out of a <div>, which is given a position property of relative so it is no longer static (the default). Therefore, all the absolute objects within it will place themselves relative to it.
Inside the <div>, the classes are used in pairs to place each of the photographs in the four corners of the parent object.
Moving Objects by Relative Amounts
You can also move objects relative to their current position by 5 pixels, or any amount between 10 and 100 pixels in steps of 10, like this:
<img class='rightby50 downby50' src='image.jpg' />
This example moves the object down and to the right by 50 pixels. If the object doesn’t already have a position, it will be placed 50 pixels down from the top and in from the left edge of its containing object.
The Classes
.totop, .totop_h:hover { top :0px; }
.tobottom, .tobottom_h:hover { bottom:0px; }
.toleft, .toleft_h:hover { left :0px; }
.toright, .toright_h:hover { right :0px; }
.leftby0, .leftby0_h:hover,
.rightby0, .rightby0_h:hover { left:0px; }
.leftby5, .leftby5_h:hover { left:-5px; }
.leftby10, .leftby10_h:hover { left:-10px; }
.leftby20, .leftby20_h:hover { left:-20px; }
.leftby30, .leftby30_h:hover { left:-30px; }
.leftby40, .leftby40_h:hover { left:-40px; }
.leftby50, .leftby50_h:hover { left:-50px; }
.leftby60, .leftby60_h:hover { left:-60px; }
.leftby70, .leftby70_h:hover { left:-70px; }
.leftby80, .leftby80_h:hover { left:-80px; }
.leftby90, .leftby90_h:hover { left:-90px; }
.leftby100, .leftby100_h:hover { left:-100px; }
.rightby5, .rightby5_h:hover { left:5px; }
.rightby10, .rightby10_h:hover { left:10px; }
.rightby20, .rightby20_h:hover { left:20px; }
.rightby30, .rightby30_h:hover { left:30px; }
.rightby40, .rightby40_h:hover { left:40px; }
.rightby50, .rightby50_h:hover { left:50px; }
.rightby60, .rightby60_h:hover { left:60px; }
.rightby70, .rightby70_h:hover { left:70px; }
.rightby80, .rightby80_h:hover { left:80px; }
.rightby90, .rightby90_h:hover { left:90px; }
.rightby100, .rightby100_h:hover { left:100px; }
.upby0, .upby0_h:hover,
.downby0, .downby0_h:hover { top:0px; }
.upby5, .upby5_h:hover { top:-5px; }
.upby10, .upby10_h:hover { top:-10px; }
.upby20, .upby20_h:hover { top:-20px; }
.upby30, .upby30_h:hover { top:-30px; }
.upby40, .upby40_h:hover { top:-40px; }
.upby50, .upby50_h:hover { top:-50px; }
.upby60, .upby60_h:hover { top:-60px; }
.upby70, .upby70_h:hover { top:-70px; }
.upby80, .upby80_h:hover { top:-80px; }
.upby90, .upby90_h:hover { top:-90px; }
.upby100, .upby100_h:hover { top:-100px; }
.downby5, .downby5_h:hover { top:5px; }
.downby10, .downby10_h:hover { top:10px; }
.downby20, .downby20_h:hover { top:20px; }
.downby30, .downby30_h:hover { top:30px; }
.downby40, .downby40_h:hover { top:40px; }
.downby50, .downby50_h:hover { top:50px; }
.downby60, .downby60_h:hover { top:60px; }
.downby70, .downby70_h:hover { top:70px; }
.downby80, .downby80_h:hover { top:80px; }
.downby90, .downby90_h:hover { top:90px; }
.downby100, .downby100_h:hover { top:100px; }
PLUG-IN 14: Selective Margins
Using the classes in this group of plug-ins, you can specify or change any of the four margins of an object by 5 pixels, or by any amount between 10 and 100 pixels, in steps of 10. In Figure 3-14, eleven <div> tags have been created, each one resting on the left edge of the browser, but using classes of leftmargin5_h through leftmargin100_h to indent them by the specified amount when the mouse passes over. In the screen grab, the mouse is currently over the <div> using the leftmargin70_h class.
FIGURE 3-14 A collection of objects set to indent by differing amounts when hovered over
Classes and Properties
About the Classes
With these classes, you can change the margins of an object by amounts between 0 and 100 pixels, in steps of 10, and also by 5 pixels. The _h suffix for the classes is supported to change a property only when it is being hovered over. The other standard suffixes are not available since they are highly unlikely to be used.
Some of the CSS rules used are similar to the following examples:
margin-left:10px; margin-right:-10px; margin-top:20px; margin-bottom:0px;
How to Use Them
To use these classes, refer to the one you need by placing its name in the class= '…' argument of an HTML tag, like this:
<div class='leftmargin30'>This text is indented by 30 pixels</div>
You can also apply the hover versions of these classes, for example enabling you to create professional looking animations for menus, like this:
<div class='leftmargin10 leftmargin20_h'>Menu Item 1</div> <div class='leftmargin10 leftmargin20_h'>Menu Item 2</div> <div class='leftmargin10 leftmargin20_h'>Menu Item 3</div>
Following is the code used to create the screen shown in Figure 3-14:
<span class='leftmargin5_h lime_b'>The leftmargin5_h class</span><br /> <span class='leftmargin10_h lime_b'>The leftmargin10_h class</span><br /> <span class='leftmargin20_h lime_b'>The leftmargin20_h class</span><br /> <span class='leftmargin30_h lime_b'>The leftmargin30_h class</span><br /> <span class='leftmargin40_h lime_b'>The leftmargin40_h class</span><br /> <span class='leftmargin50_h lime_b'>The leftmargin50_h class</span><br /> <span class='leftmargin60_h lime_b'>The leftmargin60_h class</span><br /> <span class='leftmargin70_h lime_b'>The leftmargin70_h class</span><br /> <span class='leftmargin80_h lime_b'>The leftmargin80_h class</span><br /> <span class='leftmargin90_h lime_b'>The leftmargin90_h class</span><br /> <span class='leftmargin100_h lime_b'>The leftmargin100_h class</span>
Each item has a background fill color of lime green, is aligned with the left side of the browser, and indents by the number of pixels specified in the class name it uses when the mouse passes over it.
Margins are external to objects and are therefore invisible, as can be seen in Figure 3-14, where the lime green background color has not been apportioned to the margin area of the hovered element.
The Classes
.leftmargin60, .leftmargin60_h:hover { margin-left:60px; }
.leftmargin70, .leftmargin70_h:hover { margin-left:70px; }
.leftmargin80, .leftmargin80_h:hover { margin-left:80px; }
.leftmargin90, .leftmargin90_h:hover { margin-left:90px; }
.leftmargin100, .leftmargin100_h:hover { margin-left:100px; }
.rightmargin0, .rightmargin0_h:hover { margin-right:0px; }
.rightmargin5, .rightmargin5_h:hover { margin-right:5px; }
.rightmargin10, .rightmargin10_h:hover { margin-right:10px; }
.rightmargin20, .rightmargin20_h:hover { margin-right:20px; }
.rightmargin30, .rightmargin30_h:hover { margin-right:30px; }
.rightmargin40, .rightmargin40_h:hover { margin-right:40px; }
.rightmargin50, .rightmargin50_h:hover { margin-right:50px; }
.rightmargin60, .rightmargin60_h:hover { margin-right:60px; }
.rightmargin70, .rightmargin70_h:hover { margin-right:70px; }
.rightmargin80, .rightmargin80_h:hover { margin-right:80px; }
.rightmargin90, .rightmargin90_h:hover { margin-right:90px; }
.rightmargin100, .rightmargin100_h:hover { margin-right:100px; }
.topmargin0, .topmargin0_h:hover {margin-top:0px; }
.topmargin5, .topmargin5_h:hover {margin-top:5px; }
.topmargin10, .topmargin10_h:hover {margin-top:10px; }
.topmargin20, .topmargin20_h:hover {margin-top:20px; }
.topmargin30, .topmargin30_h:hover {margin-top:30px; }
.topmargin40, .topmargin40_h:hover {margin-top:40px; }
.topmargin50, .topmargin50_h:hover {margin-top:50px; }
.topmargin60, .topmargin60_h:hover {margin-top:60px; }
.topmargin70, .topmargin70_h:hover {margin-top:70px; }
.topmargin80, .topmargin80_h:hover {margin-top:80px; }
.topmargin90, .topmargin90_h:hover {margin-top:90px; }
.topmargin100, .topmargin100_h:hover {margin-top:100px; }
.bottommargin0, .bottommargin0_h:hover { margin-bottom:0px; }
.bottommargin5, .bottommargin5_h:hover { margin-bottom:5px; }
.bottommargin10, .bottommargin10_h:hover { margin-bottom:10px; }
.bottommargin20, .bottommargin20_h:hover { margin-bottom:20px; }
.bottommargin30, .bottommargin30_h:hover { margin-bottom:30px; }
.bottommargin40, .bottommargin40_h:hover { margin-bottom:40px; }
.bottommargin50, .bottommargin50_h:hover { margin-bottom:50px; }
.bottommargin60, .bottommargin60_h:hover { margin-bottom:60px; }
.bottommargin70, .bottommargin70_h:hover { margin-bottom:70px; }
.bottommargin80, .bottommargin80_h:hover { margin-bottom:80px; }
.bottommargin90, .bottommargin90_h:hover { margin-bottom:90px; }
.bottommargin100, .bottommargin100_h:hover { margin-bottom:100px; }
PLUG-IN 15: Selective Padding
You’ve already seen the basic padding classes provided in plug-in group 9. You can also use this collection of classes to give you even greater control over which edges to pad and by how much.
FIGURE 3-15 The left padding of these objects is set to differing amounts when hovered over
In Figure 3-15, a collection of <span> objects have been given varying leftpadding.._h properties. The mouse is currently over the one assigned a value of 90 pixels, which has therefore been indented by that amount.
Classes and Properties
About the Classes
With these classes, you can change the padding of an object by amounts between 0 and 100 pixels, in steps of 10, and also by 5 pixels. The _h suffix for the classes is supported to change a property only when it is being hovered over. The other standard suffixes are not available since they are highly unlikely to be used.
Here are some examples of the CSS rules used by these classes:
padding-left:5px; padding-right:20px; padding-top:0px; padding-bottom:-10px;
How to Use Them
These classes provide similar results to the margin classes in the previous plug-in group, except that the padding of an object is internal to it and so the padded area assumes the properties of the rest of the object. This can be seen in Figure 3-15, in which the 90-pixels wide padding that has been applied to the left side of the indented span has assumed the lime green background color of the object. Here is the code used to create the screen grab:
<span class='leftpadding5_h lime_b'>Using leftpadding5_h </span><br /> <span class='leftpadding10_h lime_b'>Using leftpadding10_h </span><br /> <span class='leftpadding20_h lime_b'>Using leftpadding20_h </span><br /> <span class='leftpadding30_h lime_b'>Using leftpadding30_h </span><br /> <span class='leftpadding40_h lime_b'>Using leftpadding40_h </span><br /> <span class='leftpadding50_h lime_b'>Using leftpadding50_h </span><br /> <span class='leftpadding60_h lime_b'>Using leftpadding60_h </span><br /> <span class='leftpadding70_h lime_b'>Using leftpadding70_h </span><br /> <span class='leftpadding80_h lime_b'>Using leftpadding80_h </span><br /> <span class='leftpadding90_h lime_b'>Using leftpadding90_h </span><br /> <span class='leftpadding100_h lime_b'>Using leftpadding100_h</span>
Because of the padding property’s ability to seem to stretch an object, you will see this feature used to good effect in Chapter 12, in conjunction with animated transitions to smoothly move menu items in and out again as the mouse hovers over them.
The Classes
.leftpadding0, .leftpadding0_h:hover { padding-left:0px; }
.leftpadding5, .leftpadding5_h:hover { padding-left:5px; }
.leftpadding10, .leftpadding10_h:hover { padding-left:10px; }
.leftpadding20, .leftpadding20_h:hover { padding-left:20px; }
.leftpadding30, .leftpadding30_h:hover { padding-left:30px; }
.leftpadding40, .leftpadding40_h:hover { padding-left:40px; }
.leftpadding50, .leftpadding50_h:hover { padding-left:50px; }
.leftpadding60, .leftpadding60_h:hover { padding-left:60px; }
.leftpadding70, .leftpadding70_h:hover { padding-left:70px; }
.leftpadding80, .leftpadding80_h:hover { padding-left:80px; }
.leftpadding90, .leftpadding90_h:hover { padding-left:90px; }
.leftpadding100, .leftpadding100_h:hover { padding-left:100px; }
.rightpadding0, .rightpadding0_h:hover { padding-right:0px; }
.rightpadding5, .rightpadding5_h:hover { padding-right:5px; }
.rightpadding10, .rightpadding10_h:hover { padding-right:10px; }
.rightpadding20, .rightpadding20_h:hover { padding-right:20px; }
.rightpadding30, .rightpadding30_h:hover { padding-right:30px; }
.rightpadding40, .rightpadding40_h:hover { padding-right:40px; }
.rightpadding50, .rightpadding50_h:hover { padding-right:50px; }
.rightpadding60, .rightpadding60_h:hover { padding-right:60px; }
.rightpadding70, .rightpadding70_h:hover { padding-right:70px; }
.rightpadding80, .rightpadding80_h:hover { padding-right:80px; }
.rightpadding90, .rightpadding90_h:hover { padding-right:90px; }
.rightpadding100, .rightpadding100_h:hover { padding-right:100px; }
.toppadding0, .toppadding0_h:hover { padding-top:0px; }
.toppadding5, .toppadding5_h:hover { padding-top:5px; }
.toppadding10, .toppadding10_h:hover { padding-top:10px; }
.toppadding20, .toppadding20_h:hover { padding-top:20px; }
.toppadding30, .toppadding30_h:hover { padding-top:30px; }
.toppadding40, .toppadding40_h:hover { padding-top:40px; }
.toppadding50, .toppadding50_h:hover { padding-top:50px; }
.toppadding60, .toppadding60_h:hover { padding-top:60px; }
.toppadding70, .toppadding70_h:hover { padding-top:70px; }
.toppadding80, .toppadding80_h:hover { padding-top:80px; }
.toppadding90, .toppadding90_h:hover { padding-top:90px; }
.toppadding100, .toppadding100_h:hover { padding-top:100px; }
.bottompadding0, .bottompadding0_h:hover { padding-bottom:0px; }
.bottompadding5, .bottompadding5_h:hover { padding-bottom:5px; }
.bottompadding10, .bottompadding10_h:hover { padding-bottom:10px; }
.bottompadding20, .bottompadding20_h:hover { padding-bottom:20px; }
.bottompadding30, .bottompadding30_h:hover { padding-bottom:30px; }
.bottompadding40, .bottompadding40_h:hover { padding-bottom:40px; }
.bottompadding50, .bottompadding50_h:hover { padding-bottom:50px; }
.bottompadding60, .bottompadding60_h:hover { padding-bottom:60px; }
.bottompadding70, .bottompadding70_h:hover { padding-bottom:70px; }
.bottompadding80, .bottompadding80_h:hover { padding-bottom:80px; }
.bottompadding90, .bottompadding90_h:hover { padding-bottom:90px; }
.bottompadding100, .bottompadding100_h:hover { padding-bottom:100px; }
PLUG-IN 16: Border Style
Using the classes in plug-in group 16, you can choose exactly the kind of border you want for an object. For example, Figure 3-16 shows two rows of objects, the first of which has one of each different border style, while the second is the same, but the border styles are activated only when the mouse passes over them. In the screen grab, the mouse is currently hovering over the object with grooved borders in the second row.
FIGURE 3-16 The eight different border style classes and their hover equivalents
Classes and Properties
About the Classes
These classes enable the selection of all eight different types of border style, which can be applied immediately, or only when hovered over. They achieve this effect using the border-style property, like this:
border-style:dashed;
How to Use Them
As soon as you choose a border style for an object, the border will be displayed, but some of the classes only show these styles at their best when a mid-range color is also supplied (see the Border Color plug-in group).
To add a border to an object, refer to the border style in a class, like this:
<span class='bdouble'>Double</span>
Following is the HTML used to create the screen grab in Figure 3-16:
<br /><b>Standard Borders:</b> <span class='bdotted padding blime'>Dotted</span> <span class='bdashed padding blime'>Dashed</span> <span class='bsolid padding blime'>Solid </span> <span class='bdouble padding blime'>Double</span> <span class='bgroove padding blime'>Groove</span> <span class='bridge padding blime'>Ridge </span> <span class='binset padding blime'>Inset </span> <span class='boutset padding blime'>Outset</span> <br /><br /><br /><b>Hover Borders:</b> <span class='bdotted_h padding blime'>Dotted</span> <span class='bdashed_h padding blime'>Dashed</span> <span class='bsolid_h padding blime'>Solid </span> <span class='bdouble_h padding blime'>Double</span> <span class='bgroove_h padding blime'>Groove</span> <span class='bridge_h padding blime'>Ridge </span> <span class='binset_h padding blime'>Inset </span> <span class='boutset_h padding blime'>Outset</span>
To create space around the text, the padding class has been used, as has the class blime (explained a little further on), which sets the border color to lime green in order to clearly display the different border types that rely on color.
The first set of objects displays the borders immediately, while the second does so only when hovered over.
The Classes
.bdotted, .bdotted_h:hover { border-style:dotted; }
.bdashed, .bdashed_h:hover { border-style:dashed; }
.bsolid, .bsolid_h:hover { border-style:solid; }
.bdouble, .bdouble_h:hover { border-style:double; }
.bgroove, .bgroove_h:hover { border-style:groove; }
.bridge, .bridge_h:hover { border-style:ridge; }
.binset, .binset_h:hover { border-style:inset; }
.boutset, .boutset_h:hover { border-style:outset; }
PLUG-IN 17: Border Width
With the plug-in group 17 classes, you can specify ten different border widths either immediately, or when the mouse hovers over an object. Figure 3-17 shows the same code from the previous example except that all the borders have been given widths of 10 pixels.
FIGURE 3-17 You can specify up to 10 different border widths with these classes.
Classes and Properties
About the Classes
These classes let you change the width of a border to a value from 1 through 5 pixels, 10 through 25 pixels in steps of 5, or 50 pixels. You can also use the hover versions of the classes to apply the change only when an object is being hovered over by the mouse.
To achieve this effect, the classes use the border-width property, like this:
border-width:2 0px;
How to Use Them
Simply use the name of the class you need for the width you want in your HTML, like this:
<span class='bsolid'>This object has a solid border</span>
You can also use the hover versions of these classes, as with the following HTML which was used to create Figure 3-17:
<br /><b>Standard Borders:</b> <span class='bdotted bwidth10 padding blime'>Dotted</span> <span class='bdashed bwidth10 padding blime'>Dashed</span> <span class='bsolid bwidth10 padding blime'>Solid </span> <span class='bdouble bwidth10 padding blime'>Double</span> <span class='bgroove bwidth10 padding blime'>Groove</span> <span class='bridge bwidth10 padding blime'>Ridge </span> <span class='binset bwidth10 padding blime'>Inset </span> <span class='boutset bwidth10 padding blime'>Outset</span> <br /><br /><br /><b>Hover Borders:</b> <span class='bdotted_h bwidth10 padding blime'>Dotted</span> <span class='bdashed_h bwidth10 padding blime'>Dashed</span> <span class='bsolid_h bwidth10 padding blime'>Solid </span> <span class='bdouble_h bwidth10 padding blime'>Double</span> <span class='bgroove_h bwidth10 padding blime'>Groove</span> <span class='bridge_h bwidth10 padding blime'>Ridge </span> <span class='binset_h bwidth10 padding blime'>Inset </span> <span class='boutset_h bwidth10 padding blime'>Outset</span>
In each of these objects, a different border style is specified, with a width of 10 pixels and standard padding. Once again, the blime class (see the next section) has been used to set a border color that will show all the styles to their best effect.
The Classes
.bwidth1, .bwidth1_h:hover { border-width:1px; }
.bwidth2, .bwidth2_h:hover { border-width:2px; }
.bwidth3, .bwidth3_h:hover { border-width:3px; }
.bwidth4, .bwidth4_h:hover { border-width:4px; }
.bwidth5, .bwidth5_h:hover { border-width:5px; }
.bwidth10, .bwidth10_h:hover { border-width:10px; }
.bwidth15, .bwidth15_h:hover { border-width:15px; }
.bwidth20, .bwidth20_h:hover { border-width:20px; }
.bwidth25, .bwidth25_h:hover { border-width:25px; }
.bwidth50, .bwidth50_h:hover { border-width:50px; }
PLUG-IN 18: Border Color
With this final group of border classes, you can choose any of 21 different colors to apply to a border either immediately, or when it is moused over. Figure 3-18 expands on the example in the previous section to present two rows of objects using a variety of different border styles, widths, and colors. The second row of classes apply only when the mouse passes over an object. In the figure, it is currently over the Inset object.
Classes and Properties
FIGURE 3-18 A selection of the different border types, widths, and colors available
About the Classes
These classes provide a wide range of colors that you can apply to borders either immediately or when they are moused over. The property that is manipulated is border-color, like this:
border-color:#c44;
How to Use Them
Using these color classes is as easy as putting their names within an object’s class='…' argument, like this:
<span class='bbrown'>This object has a brown border</span>
In the following example HTML (which was used to create Figure 3-18), a variety of different colors has been used, along with different border styles and widths:
<br /><br /><br /><b>Standard Borders:</b> <span class='bdotted bwidth1 padding baqua'>Dotted</span> <span class='bdashed bwidth3 padding bblack' >Dashed</span> <span class='bsolid bwidth5 padding bblue' >Solid </span> <span class='bdouble bwidth10 padding bbrown' >Double</span> <span class='bgroove bwidth15 padding bfuchsia' >Groove</span> <span class='bridge bwidth20 padding bgold' >Ridge </span> <span class='binset bwidth25 padding bgray' >Inset </span> <span class='boutset bwidth50 padding bgreen' >Outset</span> <br /><br /><br /><br /><br /><br /><b>Hover Borders:</b> <span class='bdotted_h bwidth1 padding bkhaki' >Dotted</span> <span class='bdashed_h bwidth3 padding bmaroon'>Dashed</span> <span class='bsolid_h bwidth5 padding bnavy' >Solid </span> <span class='bdouble_h bwidth10 padding bolive' >Double</span> <span class='bgroove_h bwidth15 padding borange'>Groove</span> <span class='bridge_h bwidth20 padding bpurple'>Ridge </span> <span class='binset_h bwidth25 padding bpink' >Inset </span> <span class='boutset_h bwidth50 padding bred' >Outset</span>
The Classes
.baqua, .baqua_h:hover { border-color:#0ff; }
.bblack, .bblack_h:hover { border-color:#000; }
.bblue, .bblue_h:hover { border-color:#00f; }
.bbrown, .bbrown_h:hover { border-color:#c44; }
.bfuchsia, .bfuchsia_h:hover { border-color:#f0f; }
.bgold, .bgold_h:hover { border-color:#fc0; }
.bgray, .bgray_h:hover { border-color:#888; }
.bgreen, .bgreen_h:hover { border-color:#080; }
.bkhaki, .bkhaki_h:hover { border-color:#cc8; }
.blime, .blime_h:hover { border-color:#0f0; }
.bmaroon, .bmaroon_h:hover { border-color:#800; }
.bnavy, .bnavy_h:hover { border-color:#008; }
.bolive, .bolive_h:hover { border-color:#880; }
.borange, .borange_h:hover { border-color:#f80; }
.bpink, .bpink_h:hover { border-color:#f88; }
.bpurple, .bpurple_h:hover { border-color:#808; }
.bred, .bred_h:hover { border-color:#f00; }
.bsilver, .bsilver_h:hover { border-color:#ccc; }
.bteal, .bteal_h:hover { border-color:#088; }
.bwhite, .bwhite_h:hover { border-color:#fff; }
.byellow, .byellow_h:hover { border-color:#ff0; }
PLUG-IN 19: No Outline
To enable people to tab through a document more easily, some browsers display a dotted outline around the object being focused on, as well as highlight it. This certainly helps make it clear which object has the focus, but as you can see in Figure 3-19 where Button 2 has the focus, the dotted border inset into the button destroys much of the button’s 3D gradient effect.
FIGURE 3-19 Button 2 shows a highlight and a dotted outline.
FIGURE 3-20 The dotted outline has been removed from Button 3, leaving only the highlight.
On the other hand, in Figure 3-20, Button 3 is now focused on, and because it is using the nooutline class, there is no dotted outline. As you can see, there is still a highlight around the button, which is sufficient to inform you that the button has the focus, and the button itself looks much cleaner as a result. And on a color monitor (rather than a grayscale printed page like this), it looks even better.
Classes and Properties
About the Class
When applied to an object, this class prevents it from displaying a dotted outline when it has focus. This is achieved on most browsers with the :focus pseudo class and the outline property, like this:
.nooutline:focus { outline:none; }
However, Firefox and other Mozilla-based browsers need to be handled differently, so the following alternative is used:
.nooutline::-moz-focus-inner { border:none; padding:1px 3px; }
When the outline is removed in a Firefox browser, it reduces the size of a button by the amount of the removed outline, so the padding property is updated to increase the button’s size back again.
How to Use It
To prevent an object that has focus from displaying a dotted outline, just insert the nooutline class into the object’s class='…' argument, like this:
<button class='nooutline'>Click me</button>
Here is the HTML used to create Figures 3-19 and 3-20. If you press the TAB key several times or click the buttons, you’ll see that Button 3 does not show the dotted outline that the others display:
<button>Button 1</button> <button>Button 2</button> <button class='nooutline'>Button 3</button> <button>Button 4</button> <button>Button 5</button>
The Class
.nooutline:focus { outline:none; }
.nooutline::-moz-focus-inner { border :none; padding:1px 3px; }