CSS3 - mehr als runde Ecken

• Drucken

Kategorie: CSS3

Erstellt: Dienstag, 10. Juli 2012 15:48

Zuletzt aktualisiert: Dienstag, 25. September 2012 11:07

Geschrieben von Martina Major

Hervorgehobene 1. Buchstaben (Drop Caps)

In alten Büchern, aber auch in moderneren Schriften werden gerne mal die Anfangsbuchstaben eines Absatzes hervorgehoben. Diese Buchstaben werden auch Initiale, engl. "drop cap" genannt.
Um dies im CSS2 umzusetzten, wurde dazu z.B. ein <span< um den entsprechenden Buchstaben gesetzt.

<style type="text/css">
.dropcap {
   display: block;
   float: left;
   font-size: 300%;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   height: .8em;
   margin-bottom: -.4em;
   padding: .2em .1em 0 0;
}
	

Der zugehörige Quelltext sieht das in etwa so aus:

<p><span class="dropcap">I</span>ch bin ein Kapitel mit Initial ... </p> 

Mal abgesehen davin, dass dies auch nichtin allen Browsern funktioniert, und in reinen Textbrowser der span-Tag hinderlich ist, wäre eine Lösung mit reinem CSS wohl elegnater.

Ab CSS3 gibt es dafür eine Selektor

 .cap::first-letter
  {

   color: white;
   float: left;
   font-family: Comic Sans, Comic Sans MS;

  }

Wer jetzt nicht jedem Absatz mit einem solchen Buchstaben versehen will, der kann z.B. eine Klasse cap definieren, welche dann dem Absatz zugeordnet wird.

<p class="cap">Ich bin ein Kapitel mit Initial ... </p> 

Auch für die Simulation von "alten Büchern" ist die Verwendung moderner Techniken wie z.B. von CSS3 für die Anzeige besonderer Anfangsbuchstaben sinnvoll. Durch den first-letter-Selektor wird der Text nicht unterbrochen, die Anpassung ist somit pures CSS und wird von reinen Text-Readern nicht einmal bemerkt.

Schade das Microsoft CSS3 nicht im IE8 und IE9 implementieren will, denn bis der IE10 (nur verfügbar für Windows8) flächendeckend verwendet wird, werden Webdesigner und Programmierer wohl auf diese Vorzüge verzichten müssen bzw. Browser-Weichen einbauen müssen.

• Weiter