Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Rounding Corners (Mountaintop Technique)

Problem

You want to create one set of graphics for rounded graphics while being able to display many background colors within the column.

Solution

Use the Mountaintop technique that was popularized by web designer Dan Cederholm.

Create a small graphic that will act as the basis for the rounded corners, as shown in Figure 4-37.

The top-left corner graphic

Figure 4-37. The top-left corner graphic

Note

The black color in Figure 4-37 will be set to transparent when the image is exported as a GIF.

Export the image as a GIF with the filename corner_tl.gif.

Then rotate the image 90 degrees (see Figure 4-38) and export it as a GIF image, naming it corner_tr.gif. Repeat the last two steps to create the bottom corners, corner_br.gif and corner_bl.gif.

Rotating the image 90 degrees

Figure 4-38. Rotating the image 90 degrees

Add additional div elements around the column content:

<div id="box">
 <div id="head_outer">
  <div id="head_inner">
   <h2>
    I Met a Girl I&#8217;d Like to Know Better
   </h2>
  </div>
 </div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam.</p>
</div>

Then place the four corner graphics within the id and p selectors, as shown in Figure 4-39:

div#box {
 width: 55%;
 background-color: #999999;
 background-image: url(corner_bl.gif);
 background-repeat: no-repeat;
 background-position: bottom left;
}
#head_outer {
 background-image: url(corner_tl.gif);
 background-repeat: no-repeat;
}
#head_inner {
 background-image: url(corner_tr.gif);
 background-repeat: no-repeat;
 background-position: top right;
}
div p {
 margin: 0;
 padding: 7px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 1.1em;
 background-image: url(corner_br.gif);
 background-position: bottom right;
 background-repeat: no-repeat;
 color: #333333;
 font-size: .8em;
 line-height: 1.5;
}
Mountaintop corner example

Figure 4-39. Mountaintop corner example

Discussion

The beauty of the Mountaintop technique rests in its simplicity. Four small graphics made with low file sizes thanks to the GIF compression algorithm are placed in the background of four block-level elements.

Also, there is no need to expand a couple of images to make sure the design integrity is maintained as the column resizes, as you do with the Solution for Creating a Pull Quote with Images.

Plus, the Mountaintop technique allows you to quickly change the column’s background color without revising the corner graphics, as shown in Figure 4-40. However, you will need to change the corner graphics if the background color of the web page or column’s parent element changes.

Maintaining integrity in the column even though the color has changed and the column has been resized

Figure 4-40. Maintaining integrity in the column even though the color has changed and the column has been resized

See Also

Rounding Corners (Sliding Doors Technique) for automatically adding corners on columns without custom-made images

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required