Überschriften mit CSS ansprechend gestalten

Mit Hilfe von CSS lassen sich ansprechende Überschriften gestalten und zwar ganz ohne zusätzliche Grafiken. In nachstehendem Beispiel möchte ich diesen Effekt daher anhand eines Falt-Effektes vorstellen. Die verwendete Technik dahinter sind dabei die CSS Shapes, die hier praktikabel umgesetzt werden.

Gefaltete Überschriften mit CSS

Dieses Beispiel wendet dabei die bereits genannte Technik der CSS Shapes praktikabel an. So lassen sich ansprechende Überschriften gestalten, ohne dass du dazu weitere Grafiken in deine Webseite einbauen musst. Das hat den Vorteil, dass du so die Seitengröße noch geringer halten kannst. Dies ist ebenfalls für das mobile Surfen sehr sinnvoll.

Das hier verwendete Beispiel besteht dabei aus zwei Teilen. Zunächst zeige ich dir, wie das HTML Dokument aussehen könnte, das die Überschrift enthält.


Beispiel:

<!DOCTYPE html> 
<html lang="de">
<head>
 <meta charset="utf-8">
 <title>Code-Beispiel von Webmasterparadies.de</title>
 <!--[if IE]>
 <style>
 .arrow { top: 100%; }
 </style>
 <![endif]--> 
</head>
<body>
 <div id="container">
 <h1>Meine &Uuml;berschrift <span class="arrow"></span> </h1>
 <p> </p>
 <p>Beispieltext</p>
 </div>
</body>
</html>

Das alleine macht natürlich noch keine ansprechende Überschrift. Denn dafür braucht es selbstverständlich noch ein wenig CSS. Setze das nachstehende Snippet einfach in dein Stylesheet ein.


Beispiel:

#container {
 background: #666;
 margin: auto;
 width: 500px;
 height: 700px;
 padding-top: 30px;
 font-family: helvetica, arial, sans-serif;
 } 
h1 {
 background: #e3e3e3;
 position: relative;
 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
 padding: 10px 20px;
 margin-left: -20px;
 margin-top: 0;
 width: 70%; 
-moz-box-shadow: 1px 1px 3px #292929;
 -webkit-box-shadow: 1px 1px 3px #292929; 
color: #454545;
 text-shadow: 0 1px 0 white;
} 
.arrow {
 width: 0; height: 0;
 line-height: 0;
 border-left: 20px solid transparent;
 border-top: 10px solid #c8c8c8;
 top: 104%;
 left: 0;
 position: absolute;
} 
p {
 margin-left: 20px;
 margin-right: 20px;
 color: white;
 text-shadow: 0 -1px 0 black;
 text-align: justify;
 }

Und schon hast du eine hübsche Überschrift, die wie gefaltet aussieht.


Anzeigebeispiel:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Beispiel im Browser anzuschauen. Oder du schaust dir einfach die nachstehende Grafik an:

Ansprechende Überschriften mit CSS gestalten - dies ist das Beispiel aus dem Artikel.
So sieht die Überschrift aus dem Artikel im Browser aus
(Grafik anklicken, um sie in voller Größe anzuzeigen)

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Google Chrome 20
  • Mozilla Firefox 13
  • Opera 12
  • Internet Explorer 9

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.