CSS für Anfänger: Überschriften mit CSS gestalten

7 Beispiele, wie Sie mit CSS schöne Überschriften gestalten können

Überschriften 1-7 - CSS für Anfänger

Basierend auf dem Artikel 10 Examples of Beautiful CSS Typography and how they did it… von Ross Johnson von 3.7.Designs möchte ich Ihnen zeigen, wie Sie mit CSS wunderschöne und optisch sehr ansprechende Überschriften im Head-Bereich gestalten können.

Ich habe mir die vorliegenden 10 Beispiele etwas näher angesehen. 7 Überschriften davon haben mir sehr gut gefallen. Diese Beispiele habe ich ein wenig bearbeitet. Nachfolgend möchte ich Ihnen meine Auswahl vorstellen und den Aufbau und die Struktur mittels CSS exakt nachvollziehen.

Fertige Beispiele ansehen
Suras Weblog: Überschriften 1 – 7
Fertige Beispiele herunterladen:
Zip-Datei: 5,35 KB

Überschriften 1 bis 7 (HTML- und CSS-Formatierungen)

Überschrift Nummer 1:

Überschrift 1

HTML:

<div id="box1">
<h3>Kleine <span>Überschrift</span></h3>
<h2>Große Überschrift</h2>
</div>

CSS:

#box1 h3 {
font-family: Gill Sans, Verdana;
font-size: 11px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}

#box1 h3 span {
color: #c30;
}

#box1 h2 {
font-family: times, Times New Roman, times-roman, georgia, serif;
color: #444;
margin: 0;
padding: 0px 0px 6px 0px;
font-size: 51px;
line-height: 44px;
letter-spacing: -2px;
font-weight: bold;
}

Überschrift Nummer 2:

HTML:

<div id="box2">
<h2>Beispiel Überschrift</h2>
<p><span>Lorem ipsum dolor sit amet</span>, onsectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS:

#box2 h2 {
font-family:Georgia,serif;
color:#4E443C;
font-variant: small-caps;
text-transform: none;
font-weight: 100;
margin-bottom: 0;
}

#box2 p {
font-family: "Helvetica Neue", "Lucida Grande",
Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
margin-top: .5em;
color: #666;
}

#box2 p span {
font-family:Georgia,serif;
font-size: .8em;
font-weight: bold;
text-transform:uppercase;
letter-spacing:2px;
}

Überschrift Nummer 3:

HTML:

<div id="box3">
<h2>Freitag, dem 6. Juni 2008</h2>
<h3>Lernen Sie, <em>die Kontrolle zu übernehmen.</em></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>

CSS:

#box3 h2 {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 48px;
line-height: 40px;
letter-spacing: -1px;
color: #444;
margin: 0;
padding: 0;
font-weight: 100;
}

#box3 h3 {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 28px;
line-height: 40px;
letter-spacing: -1px;
color: #444;
margin: 0;
padding: 0;
}

#box3 p {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #444;
margin: 0;
padding: 0;
}

Überschrift Nummer 4:

HTML:

<div id="box4">
<p>There used to be a blog around these parts of the intertubes. And t’was glorious — full of
mindless blabber about Apple, Design, Typography, CSS, web design & the like…</p>
<p id="tit"><span>I like the term ‘Mac-man’. I think I’ll make that my official work title…</span>
<a href="http://sura1.wordpress.com/">about an hour ago</a></p>
</div>

CSS:

#box4 p:first-letter {
text-transform: uppercase;
}

#box4 p { color: #424242;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing:0.1em;
width: 300px;
text-align:center;
margin: 40px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 14pt;
font-variant: small-caps;
}

#box4 #tit {
width: 500px;
letter-spacing: 0;
}

#box4 p#tit span {
font-family: "Adobe Caslon Pro", "Hoefler Text",
Georgia, Garamond, Times, serif;
font-style: italic;
color: #424242;
font-size: 12px;
font-variant: normal;
}

#box4 p#tit a {
font-style: normal;
font-variant: small-caps;
text-decoration: none; font-family: "Adobe Caslon Pro", "Hoefler Text",
Georgia, Garamond, Times, serif;
color: #afafaf; font-size: 14px;
}

Überschrift Nummer 5:

HTML:

<div id="box5">
<h3 class="timoni">14. April 2009</h3>
<h2 class="timoni">Notizen über “die Relativitätstheorie von Albert Einstein”</h2>
</div>

CSS:

#box5 .timoni {
width: 300px;
}

#box5 h3.timoni {
font-size: 12px; /* Resets 1em to 10px */
font-family: Georgia, 'Times New Roman', serif;
background: #fff;
color: #000;
margin: 20px auto;
text-align: center;
font-weight: 100;
text-transform: none;
}

#box5 h2.timoni {
font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
font-weight: normal;
font-size: 1.25em;
letter-spacing: .2em;
line-height: 1.1em;
margin: 20px auto;
text-align: center;
text-transform: uppercase;
color: #6a9ca7;
}

Überschrift Nummer 6:

HTML:

<div id="box6">
<div id="ostern">
<h2>Sonntag nach Ostern: Ende der Feiern</h2>
<p>Auferstehung Jesu Christi</p>
</div><!-- end ostern -->
</div><!-- end box6 -->

CSS:

#box6 #ostern {
width: 325px;
text-align: center;
margin: 20px;
}

#box6 h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:24px;
margin-top: 5px;
margin-bottom: 0px;
letter-spacing: 0;
text-align: center;
font-weight: normal;
color: #222;
text-transform: none;
}

#box6 p {
font-family: "Lucida Grande", Tahoma;
font-size: 10px;
font-weight: lighter;
font-variant: normal;
text-transform: uppercase;
color: #666666; margin-top: 10px;
text-align: center!important;
letter-spacing: 0.3em;
margin-bottom: 40px;
}

Überschrift Nummer 7:

HTML:

<div id="box7">
<div id="sample">
<h2>Nam quis massa. Fusce ultrices turpis at turpis. Pellentesque leo.
In hac habitasse platea dictumst. Etiam varius lacus sit amet odio.
Maecenas quis urna semper mi pellentesque tincidunt.</h2>
<h3>Nr. 4</h3>
<p>“Dr. Fredric J. Baur was so proud of having designed the container for
Pringles potato crisps that he asked his family to bury him in one.” Enough said. [Via Unbeige]</p>
</div><!-- end sample -->
</div><!-- end box7 -->

CSS:

#box7 #sample {
width: 375px;
margin-left: 50px;
}

#box7 h2 {
font-family: Georgia, serif;
color:#381704;
font-size:14px;
letter-spacing:0.1em;
line-height:200%;
text-align:center;
padding-top:11px;
font-weight: 100;
text-transform: uppercase;
}

#box7 p {
font-family:georgia,serif;
color:#381704;
font-size:12px;
font-weight:normal;
line-height:150%;
padding:0px;
}

#box7 h3 {
font-family:georgia, serif;
color:#3B200F;
font-size:16px;
font-weight:bold;
line-height:125%;
text-align:center;
background-image: url(divider_quips_orange.gif);
background-position: 0% 100%;
background-repeat: no-repeat;
}
Fertige Beispiele ansehen
Suras Weblog: Überschriften 1 – 7
Fertige Beispiele herunterladen:
Zip-Datei: 5,35 KB

Gefunden unter: www.7.3Designs

Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *