Initiale mit CSS

Heute nochmal ein Tutorial, das während meines Site-Redesigns entstanden ist: Wie setzt man eines der klassischen Typo-Elemente aus dem Print-Bereich in HTML/CSS um – nämlich Initiale, gerne auch mal Initialien genannt?

Bei meinem Redesign habe ich mich schnell für ein schwarz-grau-weißes Farbschema entschieden. Der Stil gefällt mir einfach sehr gut und hebt sich von dem bunten Einheitsgeflimmer im Web ab.

Um so wichtiger war mir, ein paar nicht auf Farbe basierende, optische Akzente zu setzen. Also mußte unter anderem ein Initial am Anfang jedes Blog-Beitrages her.

Um es kurz zu machen: Die Umsetzung ist ziemlich einfach, wenn man uralte Browser-Versionen ignoriert. Das ist hier problemlos möglich, weil auch in älteren Browsern der Text fehlerfrei angezeigt wird, nur eben dann ohne Initial. Für die Umsetzung spielen zwei CSS-Pseudoklassen eine Rolle, nämlich :first-letter und :first-child. Weiterlesen »

Tags: , , ,

© 2020 Franz Neumeier's "Ceterum Censeo" Blog. Alle Rechte vorbehalten.

Powered by Wordpress and Magatheme by Bryan Helmig.