Ansprechende Überschriften mit CSS

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.

 

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;
 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;
 } 


 </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-Test

Das Beispiel habe ich dabei in folgenden Browsern getestet:

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

In den genannten Browsern funktionierte das Script dabei teilweise mit 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 hingegen 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.