Rubber Headers

Using CSS, it's simple to make rounded, oval, or similar single-line headers, to be stretched to any width. An example says more (try to resize the window to see the stretching):

A Header 150px

A Header 350px

A Header 40%

A Header 80%

How to do it?

The workaround may be following:

Create one image containing left side of the background (without the right ending of the oval). The image as wide as we'll maximally need. Here, I made 1024px wide half-oval:
Create second image containing the right ending of the oval. Here, it is 10px wide:
Add one more element inside the header - span may be the best solution, for it makes no difference without CSS. If not every h4 header should be like this one, use a named class:
<h4 class="rubberhdr"><span>A Header Text</span></h4>
Now, the CSS. Style the outer h4 element, so that it has the enclosing right arc as its background (right-aligned, not repeated):
```
h4.rubberhdr {
   height: 20px;
   margin: 0;
   padding: 0 10px 0 0;
   background: url("img/bgr-r.gif") top right no-repeat;
   font: bold 12px/1 sans-serif;
   }
```
Because we use a picture for the background, the height of the element must be exactly set (we cannot stretch the oval vertically). In this case, the oval is 20px high. Thus, the element should be also 20px high, the font-size must be smaller to not overflow the shape. The padding will be zero, but the right one: here we need 10px-wide space. This space will contain the right part of the background (the right ending of the oval).
The header will be now formated like this (look to the right):

A Header Text
Now, we'll style the inner span element. We make it to be a block, containing the left ("infinite") part of the oval as its background:
```
h4.rubberhdr span {
   display:block;
   height:20px;
   margin: 0;
   padding: 4px 0 0 10px;
   background: url("img/bgr-l.gif") top left no-repeat;
   color:white;
   text-align:center;
   white-space: nowrap;
   }
```
We use padding-top to let some space above the content (4px), and padding-left 10px to keep the content away from the left arc. The background is aligned to the top, for some browsers will calculate element's height with the padding, and some not. If the backround were vertically centered, it may be cut. The text-align:center rule isn't neccessary, we may keep text left-aligned (or right-aligned, if needed).
The header will be now formated like this:

A Header Text
If you don't need the header as wide as the page (or parent container), just enclose it into a narrower element:
```
<div style="width:240px">
<h4 class='rubberhdr'><span>A Header Text</span></h4>
</div>
```
A Header Text

Color variants

Using "inverse tranparent" images may satisfy needs of color variants of same shaped headers. We may create both background images containing only the left and right arcs, while the solid part of the image is the outer part around the arc (filled with the page background - white in this case), and the inner part of the arc is transparent. If we set solid-color background for the header's container, these images replace the background and make the shape. E.g.:

<div style="width:240px; background:red">
<h4 class='rubberhdr-invers'><span>A Header Text</span></h4>
</div>

<div style="width:240px; background:green">
<h4 class='rubberhdr-invers'><span>A Header Text</span></h4>
</div>

A Header Text

The problem: several browsers use the MSIE size model (element_height = content+padding+border), and it will look OK. In standard-compliant browser (or browser mode), where element-height = content-height, we have a problem - for the height is 24px (height=20px + padding=4px). This causes 4px line under the header.

We need to use a size-hack. Several posibilities are available. E.g., the images can be higher (to hide this bottom part of the background). I guess the simplier way is this: let's use one more span element to make the top padding - while the other elements will have padding-top:0. This assures the height is always and really 20px high:

h4.rubberhdr-invers2 span.inner {
   ...
   padding: 0 0 0 10px;
   ...
   }
span.toppad {
   display:block;
   padding-top: 4px;
   }

<h4 class='rubberhdr-invers'>
  <span class="inner"><span class="toppad">
  A Header Text
  </span></span>
</h4>

A Header Text

However, usign these "inverse trasparent" images, it's difficult to make antialised edges. In fact, it's impossible if we use GIF. The only way seems to use alpha-channel transparent PNGs. If the browser supports translucent PNGs, it may work (if not, other shape or other-colored arcs will be displayed):

A Header Text

Thanks to Zozzi for the idea of inverse-transparent images.

Comments

In CSS, there are always many ways to get same result. You can simply switch sides: what we did for the right side, may be done for left side, and vice versa. The element may be divided into three parts - left & right will contain the arcs only, the middle part will stretch between them. Etc.

This construction should work in every modern browser - it has been successfuly tested in IE5/Win, IE6/Win, IE5/Mac, Mozilla, Camino, Opera, and Safari.

There are three major disadvantages. First: in this example, we use white page background and white text in the headers. If the header background is missing, the header text won't be visible. Second: we use exact height of the header & its font. If user uses larger font, the text may flow from the shape. Third: the text must be short. If it breaks into new line, the construction is broken, too.

Petr Stanicek [aka -pixy-] - (c) 2003-05-14, 09:09 CET
http://www.pixy.cz/