Drop-down-Menüs mit dem Anfangsbuchstaben des CSS-Codes steuern

Jhey Tompkins
Die Kunst der Stile von Drop-Caps gibt es schon seit Hunderten, wenn nicht Tausenden von Jahren. Die Verwendung im Druckstil als Symbol für den Beginn eines neuen Abschnitts oder Kapitels ist geschichtlich sichtbar. Aber Stile waren im digitalen Zeitalter schon immer problematisch. Es gab keine „saubere“ Lösung für die Gestaltung.

Mit der CSS-Eigenschaft initial-letter wird dies viel einfacher.

Unterstützte Browser

Wo kannst du initial-letter ausprobieren? Sie ist in Safari und ab Chrome 110 verfügbar. In Safari benötigt die Property das Präfix -webkit-. Es gibt ein offenes Problem für die Implementierung in Firefox.

Testen Sie die initial-letter-Unterstützung mit:

@supports (initial-letter: 1 1) { /* Your supported styles */ }

Aktuelle Lösungen

Wie könnten Sie heute ein Drop-down-Menü in CSS gestalten?

Das Pseudoelement ::first-letter übernimmt einen Teil des Weges.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

Sie müssen dann aber wahrscheinlich nach Properties wie „Gleitkommazahl“ suchen, wenn Sie die Größe für den ersten Buchstaben berechnen.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

Die Einführung neuer CSS-Einheiten wie lh könnte einige dieser Probleme entkräften. Allerdings werden auch diese nur eingeschränkt unterstützt (lh wird derzeit nur in Chrome unterstützt).

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

Der Anfangsbuchstabe

Mit der Eigenschaft initial-letter können Sie den Stil der Drop-down-Begrenzung genauer festlegen. Es werden zwei durch Leerzeichen getrennte Werte verwendet:

p::first-letter {
  initial-letter: 3.5 3;
}
  • Das erste Argument definiert die Größe des Buchstabens und die Anzahl der Zeilen, die er einnimmt. Der Buchstabe wird unter Beibehaltung des Seitenverhältnisses vergrößert. Negative Werte sind nicht zulässig, es sind jedoch Dezimalzahlen möglich.
  • Das zweite Argument definiert die Senke der Buchstaben. Dies kann man sich als Versatz für die Position des Buchstabens vorstellen. Der zweite Wert ist optional und darf nicht negativ sein. Wenn sie nicht vorhanden ist, wird von dem Wert für die Buchstabengröße ausgegangen, der auf die nächste Ganzzahl abgerundet ist. Dies entspricht der Verwendung des Keywords „drop“. Die Senke akzeptiert auch einen anderen Keyword-Wert, „raise“, der einer Senke von 1 entspricht.

In dieser Demo können Sie die Werte ändern, um zu sehen, wie sich dies auf den Stil des Drop-down-Cappings auswirkt.

Wenn Sie den Wert mit ::first-line kombinieren, könnte dies etwa so aussehen:

p::first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}

Oder geben Sie einen border an. Im folgenden Beispiel wird das Keyword „drop“ verwendet, das standardmäßig verwendet wird, wenn es weggelassen wird und dem Wert 3 entspricht: css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }

Fügen Sie z. B. background oder box-shadow hinzu:

p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

Sie können auch den Hintergrund auf den Text zuschneiden:

p::first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}

Sie haben viele Möglichkeiten!

Das wars auch schon mit initial-letter. Würden Sie Ihrer Typografie Drop-down-Menüs hinzufügen? Wie könnten Sie sie gestalten? Schreiben Sie uns!