Initialbuchstaben-Generator (Drop Cap)
Gestalten Sie den ersten Buchstaben eines Absatzes als große Zierinitiale und kopieren Sie den fertigen CSS-Code
Mit diesem Generator gestalten Sie eine Initiale (Drop Cap), also den vergrößerten ersten Buchstaben eines Absatzes, direkt im Browser. Größe, Schriftart, Farbe und Abstände lassen sich frei anpassen; den passenden HTML- und CSS-Code übernehmen Sie anschließend unverändert in Ihr Projekt.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie den englischen Beispieltext für die Vorschau ein.
- Stellen Sie Schriftart, Farbe, Größe und Abstände des ersten Buchstabens über die Regler ein.
- Begutachten Sie das Ergebnis in der Live-Vorschau und kopieren Sie den erzeugten CSS-Code.
FAQ
- Wie funktioniert eine Drop Cap im Web technisch?
- Der Standardweg führt über das CSS-Pseudoelement ::first-letter. Damit lässt sich allein der erste Buchstabe ansprechen und per float sowie größerer Schriftgröße in den Absatz einbetten.
- Eignet sich das auch für andere Schriftsysteme?
- Initialen stammen aus der lateinischen Typografie und wirken dort am besten. Technisch funktionieren auch andere Schriftsysteme, doch wegen der abweichenden Zeichenformen und Zeilenlagen empfehlen wir lateinische Texte.
- Kann ich das generierte CSS direkt in eine Blog-Plattform wie WordPress einfügen?
- Ja, der generierte Code ist Standard-CSS. Wenn Sie ihn in das Feld für benutzerdefiniertes CSS oder den HTML-Bearbeitungsmodus Ihrer Plattform einfügen, wird derselbe Drop Cap auf den meisten Blog-Plattformen genauso dargestellt.