No Frontiers: Breaking out of the box using rounded imagery

No Frontiers!: Breaking out of the box using rounded imagery

Michal Mokrzycki, Designer

www.csszengarden.com/097

A DOMINANT TREND in CSS design is centered, fixed layouts and predictable drop shadowsa trend that Michal Mokrzycki sought to break out of in No Frontiers! He determined to go with a full-width, expandable layout using three columns. The design would be as clean as possible, but elegant and unique.

Unlike many process-oriented designers, Mokrzycki often relies on improvisation when approaching design elements. He began by searching through his photo collection and worked from there, going back and forth between CSS and Adobe Photoshop to solidify his ideas. During this experience, Mokrzycki realized that CSS offered potentially endless options for outside-the-box designs, which is why he named his submission No Frontiers!

The Rectangular Problem

It's no accident that design for the Web historically has been boxy. It's also very ironic that CSS design has been criticized as particularly guilty of being boxy! Consider that early table-based designs, with their heavy use of borders and padding, often looked like rectangles thrown up on the page in no cohesive manner (FIGURE 1).

Figure 1. Rectangular overkill on the early Web.

Consider also that at the time, most personal computers shipped with a screen resolution of 640 by 480precious little visual real estate compared with what we have today. Add to that the rectangular interface features of the Web browser, and the frame of the computer screen itself, and we were left with what amounted to rectangles within rectangles within rectangles.

From a visual standpoint, this didn't do much to put site visitors at ease with whatever information was buried in all the boxy-ness. Of course, that was a very heady timethe Web was new, and its allure allowed for a lot of forgiveness on the part of both those creating pages and those visiting them.

Of course, when CSS began to catch on as a means of pure visual presentation, most of the innovation was focused on re-creating the same kinds of designs that Web users were accustomed to seeing previously. The focus on columnar designs and the ease of use when it came to applying decorative features like borders naturally facilitated the early designs that had been so criticized for their abundance of rectangles (FIGURE 2).

Figure 2. Early CSS layout: column-focused and very boxy indeed, but considered the "holy grail" of its time, as it visually replicated a popular HTML layout.

It's inaccurate to say that CSS should bear the brunt of responsibility for the rectangular problem. As our understanding of CSS is maturing, all kinds of ways are emerging to cleverly engage imagery, particularly in element backgrounds, to create literal layers of shapes, patterns, and embellishments that transcend the boxy designs of previous years.

No Frontiers! uses rounded corners and circular embellishments that take the literal edge off of the design's boxy qualities, softening and unifying the overall look.

Note

Fortunately, as Web design became more sophisticated, designers did learn to add shape to their table-based designs by using the slice-and-dice method of taking images and placing them in a table grid. Over time, a more cohesive and process-oriented approach emerged, leading to new visual trends, but for the most part, the boxy issue has been with us since the Web had any kind of graphic interface.

Getting Curvy

A number of examples in No Frontiers! help demonstrate how you can add some curves and round out designs that might otherwise appear boxy. They all involve using background images in some way.

Easy Curves: A Single Background Image

The most obvious way to add some curves into a design is to create a single graphic with all of the curves and content intact. Then you merely drop it into the background of the element in question using CSS.

Note

The transparent value allows other background colors and images to show through the transparent portion of the image.

You can see this exact method at work in No Frontiers! The header "The Road to Enlightenment" has a nice rounded edge to the right (FIGURE 3).

Figure 3. A rounded-edged graphic header from No Frontiers! Notice the transparency at right.

The image is then dropped into the background of the h3 within #preamble:

 #preamble h3 {   background: transparent url(enlightment.gif) no-repeat top left;     width: 291px;   height: 37px;   margin-bottom: 10px;   padding: 0; } 

But what if you want a curved graphic like that over another background?

Multiple Element Backgrounds

You can add visual interest with images and CSS by taking advantage of multiple element backgrounds. This is the process of placing background graphics in numerous elements to create an illusion of layering, while keeping images small and low in weight.

In No Frontiers! this technique can be seen with the "CSS Zen Garden" header, which has a rounded right corner. A striped image appears behind it (FIGURE 4).

Figure 4. The rounded-right-corner header appears to be layered over the striped background.

To achieve this effect, Mokrzycki first placed the striped image, which is just a thin strip (FIGURE 5), into the body element background:

 body {    font: small "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;    color: #676767;    margin: 0px;    padding: 0px; background: #fbfbf2 url(page_back.gif) repeat-x fixed;    } 

Figure 5. The slim graphic repeats along the x-axis in the background of the body element.

Then, the image with the rounded corner was dropped into the container element:

 #container {    padding: 0px;    margin: 0px;    background: transparent url(body_back.png) no-repeat top left;    } 

Conceptually, the backgrounds are now layered, resulting in a rounded edge against a differently patterned image. Another instance of this can be observed in the upper-right corner of the design, where rounded corners on the link list header appear distinctly above the striped pattern (FIGURE 6).

Figure 6. Another instance of a background layering effect.

Cornering Content

Building on the layer concept, it's possible to get multiple rounded corners or other edge effects with content. The challenge with this approach is that you'll have to rely on multiple HTML elements just to get the effect.

An example of this can be seen in the #pageHeader and #quickSummary sections of No Frontiers! The ultimate appearance is text within a portion of the layout that sports rounded corners on the top and bottom (FIGURE 7).

Figure 7. Multiple element backgrounds contain a text interior.

Without CSS, this would have to be a single image, or multiple images broken up into a table. However, with CSS it's possible to create only the images for the rounding effect and to allow for styled HTML text, thereby reducing the file size of the images necessary to pull off the effect.

To achieve this, Mokrzycki created two images, one for the top of the section (FIGURE 8) and one for the bottom (FIGURE 9).

Figure 8. The top image of the effect, which contains graphic text.

Figure 9. The bottom image. Note the transparent portions of both images, indicated by the bits of the gray and white checkerboard pattern peeking through.

These were then dropped into the backgrounds of the #pageheader and #pageheader h2 elements, respectively:

 #pageHeader {    position: absolute;    left: 0px;    top: 190px;    width: 291px;    height: 159px;    background: transparent url(green_top.gif) no-repeat top left;        z-index: 3; } #pageHeader h2 {    position: absolute;    top: 118px;     background: transparent url(green_bottom.gif)    no-repeat bottom left;                           width: 291px;    height: 135px;    margin: 0;    padding: 0; } 

Note

More advanced techniques, such as Douglas Bowman's "Sliding Doors of CSS" (www.alistapart.com/articles/slidingdoors and www.alistapart.com/articles/slidingdoors2), rely on the layering background concept.

But the #pageHeader h1 and #quickSummary elements contain no images whatsoever. Rather, they are positioned, the h1 is given a background color, and the HTML text content within it is styled:

 #pageHeader h1 {   position: absolute;                             top: 59px;   background-color: #bbbf58;                      border-right: 2px solid #fff;   width: 289px;   height: 150px;   margin: 0;   padding: 0; } #quickSummary {    position: absolute;                             top: 270px;    left: 20px;    width: 245px;    line-height: 2;    z-index: 3; } #quickSummary p {    color: #fff;    font-size: 11px;    line-height: 1.5;    font-family: Verdana, Arial, Helvetica, sans-serif; } 

Notice also that the sections are given heights. This helps prevent collapsing or overflow.

Note

More ideas on how to use similar approaches for great corner effects are listed in "CSS Design: Creating Custom Corners & Borders," by Søren Madsen (www.alistapart.com/articles/customcorners).

Custom Bullets

This technique also involves dropping images into the background of an elementin this case, the li element. Using the circular, image-based bullets plays into the overall theme in No Frontiers! and provides a little more context for those designers interested in creating imagery that is integrated with the overall concept (FIGURE 10).

Figure 10. The link list with custom bullets.

To achieve the full set of custom bullets in No Frontiers! Mokrzycki first created three different bullet images. The first, a light green color, is used for the primary links. The second, a light blue color, is used for the Archive links. The third, a light reddish brown color, is used in the Resources section.

The bullet images were then dropped into the specific element backgrounds related to each section:

 #lselect li {    background: transparent url(link_dot.gif) 0 7px no-repeat;       } #larchives li {    background: transparent url(link_dot2.gif) 0 7px no-repeat;      } #lresources li {    background: transparent url(link_dot3.gif) 0 7px no-repeat;      } 

Using differently colored bullets adds visual interest and provides a cue to the visitor that each of these sections is contextually different.

Well-Rounded Imagery

Whether you're looking to create rounded corners or other edge treatments to break out of the proverbial box, tapping into image techniques can bring a fresh and unique look to a design. Following through with complementary shapes can make the visual effects all the more distinct, as we find in No Frontiers!