Ansprechende Überschriften mit CSS3

Zuletzt aktualisiert: Samstag, 31. Dezember 2016 Geschrieben von Jan Pionzewski

Mit Hilfe von CSS3 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 CSS3

Die bereits genannte Technik der CSS-Shapes wird in diesem Beispiel praktikabel angewendet. So lassen sich ansprechende Überschriften gestalten, ohne dass du dazu weitere Grafiken in deine Webseite einbauen musst. Das hat den Vorteil, dass so die Seitengröße noch geringer gehalten werden kann. 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 wurde von mir 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.

 

 

Kommentar schreiben