Ansprechende Überschriften mit CSS

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

 

Gefaltete Überschriften mit CSS

Dieses Beispiel wendet 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 insbesondere für das mobile Surfen sehr sinnvoll.

 

Code-Beispiel:

<!DOCTYPE html> 

<html lang="de">
<head>
 <meta charset="utf-8">
 <title>Code-Beispiel von Webmasterparadies.de</title>

 <style>

#container {
 background: #666;
 margin: auto;
 width: 500px;
 height: 700px;
 padding-top: 30px;
 font-family: helvetica, arial, sans-serif;
 } 

h1 {
 background: #e3e3e3;
 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;
 position: relative;
 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;
 } 


 </style>

 <!--[if IE]>
 <style>
 .arrow { top: 100%; }
 </style>
 <![endif]--> 

</head>
<body>
 <div id="container">

 <h1> Meine &Uuml;berschrift <span class="arrow"></span> </h1>
 <p>&nbsp;</p>
 <p>Beispieltext</p>

 </div>
</body>
</html>

 

Anzeigebeispiel ansehen

 

Browser-Kompatibilität

Dieses CSS-Script habe ich in folgenden Browsern getestet:

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

In den genannten Browsern funktionierte das Script dabei einwandfrei bzw. mit folgenden Einschränkungen: Firefox zeigt an der Faltkante eine weiße Linie und der Internet Explorer in Version 9 kennt keinen Text-Schatten. Opera und Chrome zeigen das Beispiel einwandfrei an. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.