Web Forms - Three-dimensional legend

Started by ganeshbala, Apr 18, 2008, 08:35 PM

Previous topic - Next topic
Go Down Pages1

ganeshbala

Apr 18, 2008, 08:35 PM
Three-dimensional legend

Finally, let's apply some CSS to the tag, creating a three-dimensional box effect that appears connected to the border created by the <fieldset> element.

#thisform {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #999;
  }

#thisform label {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #660000;
  }

#thisform fieldset {
  border: 1px solid #ccc;
  padding: 0 20px;
  }

#thisform legend {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 90%;
  color: #666;
  background: #eee;
  border: 1px solid #ccc;
  border-bottom-color: #999;
  border-right-color: #999;
  padding: 4px 8px;
  }

As you can see, we're doing several things here. First, we're customizing the font, weight, and size of the . Second, for the 3-D effect, we've set the background to a light gray, and then we've added a single-pixel border around the whole that matches the border that we've used for the element. For the shading effect, we've overridden the border's color on the bottom and right sides only, with a slightly darker gray.

FONT Size percentages:  Since we've previously set font-size: 12px; for the entirety of #thisform, to make the <legend> text smaller, we'll just use a percentage. Setting a font size at a high level and then using percentages further down the hierarchy makes for easier maintenance later on. Need to bump up the whole site's font size? Just make a single update, and the percentages will change accordingly. In fact, ideally we'd set that initial size on the <body> element, and use percentages everywhere else. For this example, though, we've chosen to set it at the <form> level.

Padding was also adjusted to give the text in the box some breathing room. That's it! Figure 5-14 shows the finished results with all of the CSS we've been adding throughout the chapter—all the while using our lean, mean, marked-up form.

Wrapping up

There are many different ways to mark up forms—whether you use a table, a definition list, or simple paragraph tags to structure your form labels and controls, keep in mind the accessibility features that can easily be applied to any of the methods we've looked at in this chapter.

Attributes such as tabindex and accesskey can improve your form's navigation. elements with corresponding id attributes can ensure those browsing with assistive software can still interact with your forms.
Go Up Pages1