7 Beispiele, wie Sie mit CSS schöne Überschriften im Headbereich von Webseiten gestalten können
Posted by sura1 - 14. April 2009
7 Beispiele, wie Sie mit CSS schöne Überschriften im Headbereich von Webseiten gestalten können
Basierend auf dem Artikel 10 Examples of Beautiful CSS Typography and how they did it… von Ross Johnson in seinem Blog www.3point7designs.com/blog vom 2. Juni 2008 möchte ich Ihnen zeigen, wie Sie alleine mit CSS wunderschöne und optisch sehr ansprechende Überschriften und Head-Bereiche gestalten können.
Ich habe mir die vorliegenden 10 Beispiele angesehen. 7 davon habe ich etwas bearbeitet – diese möchte ich Ihnen hiermit näher vorstellen:
Fertige Beispiele ansehen
Download Beispiele (*zip*-File: 5,35KB)
Beispiel Nummer 1:
HTML:
<div id="box1">
<h3>Kleine <span>Überschrift</span></h3>
<h2>Große Überschrift</h2>
</div>
<!-- end box1 -->
CSS:
/* ===============
Beispiel 1 - Typography
=============== */
#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;
}
Beispiel 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> <!-- end box2 -->
CSS:
/* ===============
Beispiel 2 - Typography
=============== */
#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;
}
Beispiel 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> <!-- end box3 -->
CSS:
/* ===============
Beispiel 3 - Typography
=============== */
#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;
}
Beispiel Nummer 4:
HTML:
<div id="box4">
<p>There used to be a blog around these parts of the intertubes. And t%u2019was glorious %u2014 full of
mindless blabber about Apple, Design, Typography, CSS, web design & the like%u2026</p>
<p id="tit"><span>I like the term Mac-man. I think I`ll make that my official work title...</span>
<a href="https://sura1.wordpress.com/">about an hour ago</a></p>
</div> <!-- end box4 -->
/* ================
Beispiel 4 - Typography
================ */
#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;
}
Beispiel Nummer 5:
HTML:
<div id="box5">
<h3 class="timoni">14. April 2009</h3>
<h2 class="timoni">Notizen über %u201Cdie Relativitätstheorie von Albert Einstein%u201D</h2>
</div> <!-- end box5 -->
/* ===============
Beispiel 5 - Typography
=============== */
#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;
}
Beispiel 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 -->
/* ===============
Beispiel 6 - Typography
=============== */
#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;
}
Beispiel 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>%u201CDr. 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.%u201D Enough said. [Via Unbeige]</p>
</div> <!-- end sample -->
</div> <!-- end box7 -->
/* ================
Beispiel 7 - Typography
================ */
#box7 #sample {
width: 375px;
margin-left: 50px;
}
#box7 h2 {
font-family: Georgia, serif;
color:#381704;
font-size:10px;
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;
}
Sura 1 Artworks 
Hinterlasse einen Kommentar