Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

«
»

Formatierung von Überschriften mit CSS

Posted by sura1 - 13. August 2008

Bookmark and Share

Beispiele für die Formatierung von Überschriften mit CSS

Die folgenden Beispiele zeigen, welche unterschiedlichen Wege Sie zur Formatierung von Überschriften gehen können.

Durch den Einsatz von CSS (Cascading Style Sheets) in Verbindung mit Hintergrund-Grafiken verwandeln Sie einfache HTML-Überschriften in elegante Hingucker!

Es wurden dabei bewusst verschiedene Wege gegangen. Zum Beispiel werden die Werte für die Positionierung der Hintergrundgrafiken als Werte, als Wort und auch in Prozent angegeben.

Ich möchte Ihnen hier 7 Beispiele vorstellen, wie Sie Überschriften mit CSS gestalten können:

Sie können den HTML-Quellcode und den jeweiligen CSS-Code markieren, kopieren und in Ihren HTML- bzw. CSS-Editor einbauen. Die Hintergrund-Grafiken finden Sie beim jeweiligen Beispiel.

Sie haben auch die Möglichkeit,  alle html-Dateien (CSS ist im HTML-Code eingebaut!) und die Grafiken in einem Zip-File (23,5 KB) herunterladen. Klicken Sie dazu bitte auf den Download-Button:

Der HTML-Quellcode ist für alle Beispiele der gleiche (siehe unten!):

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Beispiele für Überschriften; Beispiel 1.....7</title>
</head>
<body>
<h3>Überschrift - Beispiel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minimveniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

B e i s p i e l e:

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
       background-color: #ccc;
      }
h3 {
font: normal 1.67em/1 georgia, palatino, "Times New Roman", serif;
background: #F1F5F8;
border-bottom: 1px solid #DADDE0;
color: #111;
letter-spacing: -0.02em;
padding: 10px;
margin-bottom: 0;
}
p {
margin: 0;
background: #F1F5F8;
padding: 1em;
border-top: 1px solid #fff;
}

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
       background-color: #ccc; }
h3 { font: normal 2.1em/1.3 georgia, palatino, "Times New Roman", serif;
     color: #b71221;
     background-color: #fff;
     border-bottom: 1px solid #d2dde4;
     letter-spacing: -0.03em;
     margin: 0;
     padding: 5px 10px;
   }

p { padding: 10px;
    margin: 0;
    background-color: #fff;
  }

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
       background-color: #efefef;
      }
h3 { font: normal 1.5em/1 arial, sans-serif;
     background: #474645 url(verlauf-orange.jpg) top left repeat-x;
     border-bottom: 1px solid #ac6606;
     color: #fff;
     text-transform: uppercase;
     padding: 5px 10px;
     margin-bottom: 0;
    }

p { background: #ddd;
    padding: 10px;
    border-top: 1px solid #fff;
    margin: 0;
   }

Hintergrund-Grafik:

verlauf-orange.jpg

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
      }
h3 { background: transparent url(sprechblase-gelb.gif) 0 50% no-repeat;
     color: #111;
     font: normal 2em/1 arial, sans-serif;
     font-weight: bold;
     padding: 10px 0 5px 60px;
     margin: 0;
     margin-left: 10px;
   }
p { padding: 0 10px; }

Hintergrund-Grafik:

sprechblase-gelb.gif

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
      }
h3 { background: transparent url(strich-blau.jpg) 0 50% no-repeat;
     color: #022745;
     font: normal 2em/1 "American Typewriter", "Marker Felt", courier, sans-serif;
     padding: 40px 0 50px 30px;
     margin-bottom: 0;
   }

p { font-family: "American Typewriter", "Marker Felt", courier, sans-serif;
    margin: 0;
    padding: 0 5px;
  }

Hintergrund-Grafik:

strich-blau.jpg

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
      }
h3 { background: #e9e9e9 url(ecke.gif) top right no-repeat;
     color: #111;
     font: normal 1.1em/1 arial, sans-serif;
     text-transform: uppercase;
     margin: 0;
     padding: 10px;
     display: inline;
    }

p { font-family: arial, sans-serif;
    color: #111;
    background: #e9e9e9;
    padding: 10px;
    margin: 0;
   }

Hintergrund-Grafik:

ecke.gif

CSS-Code: 

body { width: 700px;
       margin: 100px auto;
      }
h3 { background: #b4bcc7 url(verlauf-dunkel.jpg) 0 100% repeat-x;
     color: #fff;
     font: bold 1.5em/1 arial, sans-serif;
     border-bottom: 1px solid #111;
     margin-bottom: 0;
     padding: 10px;
    }

p { font-family: arial, sans-serif;
    color: #fff;
    background: #b4bcc7 url(verlauf-dunkel-gespiegelt.jpg) 0 0 repeat-x;
    padding: 10px;
    border-top: 1px solid #67717a;
    margin-top: 0;
  }

Hintergrund-Grafik:

verlauf-dunkel.jpg verlauf-dunkel-gespiegelt.jpg

Quelle:

Die Autorin Manuela Hoffmann arbeitet als Grafikerin und Webdesignerin in Berlin. Auf der Webseite http://www.einfach-modernes-webdesign.de/ wird über ihr Buch Modernes Webdesign (Gestaltungsprinzipien, Webstandards, Praxis) ausführlich berichtet.

Sie können alle im Buch näher erläuterten Beispiele in einem komprimierten ZIP-File herunterladen. Auch meine Beispiele habe ich nach diesen Vorlagen erstellt. Link: Beispiele als Zip-Datei (5MB)

This entry was posted on 13. August 2008 um 21:03 and is filed under CSS. Verschlagwortet mit: , , , , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, oder trackback from your own site.

2 Antworten to “Formatierung von Überschriften mit CSS”

  1. Robert Pairan said

    11. März 2011 um 15:16

    vielen Dank, das ist sehr anschaulich und verständlich – das habe sogar ich kapiert.

    Antworten

Hinterlasse einen Kommentar

«
»