Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Übung: Initial gestalten (DropCap)

Posted by sura1 - 20. August 2008

Bookmark and Share

Wie Sie mit ein wenig CSS Initialen gestalten

Eine Initiale oder ein Initial (v. latein. initium „Anfang, Beginn“) ist laut Wikipedia „ein schmückender Anfangsbuchstabe, der im Werksatz als erster Buchstabe von Kapiteln oder Abschnitten verwendet wird.“ In der Vergangenheit wurden Initiale reich verziert. Heute werden als Initiale meist Großbuchstaben (Versalien) mit größeren Schriftgraden verwendet, die stilistisch zur Grundschrift passen sollten. Im Englischen werden Initialen, die im linken Rand floaten, als „DropCap“ bezeichnet. Wörtlich bedeutet das etwa „fallender Großbuchstabe“.

Nachfolgend finden Sie den HTML- und CSS-Code:

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" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DropCap (Initial) gestalten</title>
</head>
<body>

<h1>DropCap</h1>

<h2>DropCap mit <code>span</code></h2>

<p class="dropcap">
<span>E</span>ine Initiale oder ein Initial (v. latein. initium "Anfang, Beginn") ist
laut Wikipedia "<cite>ein schmückender Anfangsbuchstabe, der im Werksatz als erster
Buchstabe von Kapiteln oder Abschnitten verwendet wird.</cite>" In der Vergangenheit
wurden Initiale reich verziert. Heute werden als Initiale meist Großbuchstaben (Versalien)
mit größeren Schriftgraden verwendet, die stilistisch zur Grundschrift passen sollten.
Im Englischen werden Initialen, die im linken Rand floaten, als "DropCap" bezeichnet.
Wörtlich bedeutet das etwa "fallender Großbuchstabe".
</p>

</body>
</html>
CSS-Code:

* {
      padding: 0;
      margin: 0;
   }
   h1, p {
      margin: 1em 0;
   }
   body {
      width: 50em;
      font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
      font-size: small;
      line-height: 1.5;
      padding: 10px;
      margin: 0 auto;
   }
/* ==============================================
   Initial gestalten (DropCap)
   ============================================== */
.dropcap span {
   float: left;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 400%;
   line-height: 1; /* wichtig */
   text-transform: uppercase; /* IMMER als Großbuchstabe darstellen */
   background-color: #fafafa;
   color: #aaa;
   padding: 0 5px ;
   border: 2px solid #ccc;
   margin-right: 10px;
   margin-top: 7px; /* je nach Umständen ggfs. anpassen */
}

Fertiges Beispiel: (hier ansehen!)

Quelle:

Obiges Beispiel stammt aus den Übungsdateien der Webseite http://little-boxes.de. ZIP-Datei des Buches Little Boxes – Teil 02 downloaden und entpacken, und schon stehen Ihnen die Beispieldateien zur Verfügung.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: