Röhrengrafik als Gestaltungselement

Gestaltungsbeispiele mit horizontalen Röhrengrafiken

Röhre als obere Begrenzung

CSS:
.oben {
background: #eee2f0 url(roehrelila.gif) repeat-x;
width: 500px;
padding: 50px 10px 10px;
}

HTML:
<div class="oben">
<h3>Röhre als obere Begrenzung</h3>
Inhalt...
</div>

Röhre als untere Begrenzung

.unten {
background: #eee2f0 url(roehrelila.gif) repeat-x bottom left;
width: 500px;
padding: 10px 10px 50px 10px;
}

HTML:
<div class="unten">
<h3>Röhre als untere Begrenzung</h3>
Inhalt...
</div>

Röhre oben und unten

CSS:
.unten {
background: #eee2f0 url(roehrelila.gif) repeat-x bottom left;
width: 500px;
padding-bottom: 30px; }

h3 {
padding: 10px;
}

p {
padding: 10px;
}

HTML
<div class="unten">
<img src="roehrelila.gif" width="500" height="30" border="0" alt="Röhre">
<h3>Röhre oben und unten</h3>
<p>
Inhalt
</p>
</div>

Überschriftenröhre

CSS:
.oben {
background: #eee2f0;
width: 500px;
}

h3 {
background: url(roehrelila.gif) repeat-x;
line-height: 30px;
font-size: 16px;
margin: 0;
padding: 0 10px;
}

p {
padding: 10px;
}

HTML:
<div class="oben">
<h3>Überschriftenröhre</h3>
<p>
Inhalt
</p>
</div>