Ich bin hierher gekommen, um ein bisschen Designhilfe oder Rat zu suchen, wie ich möglicherweise Folgendes verbessern kann:
Wie der Titel schon sagt, habe ich ein Website-Banner mit mehreren Texten, die auf verschiedenen Bildern als Hintergrund angezeigt werden. Da die meisten Bilder dunkel sind, habe ich die Schriftfarbe auf Weiß eingestellt. Aber selbst dann ist ein Teil des Textes auf einigen Bildern nicht gut lesbar:
Da ich mit CSS arbeite, habe ich verschiedene Optionen ausprobiert:
Hinzufügen von Textschatten:
CSS:
text-shadow: 3px 3px 0px #000;
Es wurde auch versucht, einen halbtransparenten Rahmen um den Text zu erstellen:
Ich fühle, die Box sieht fehl am Platz aus.
Ich habe eine Geige für jeden geschaffen, der CSS kennt. Wenn nicht, können Sie mich gerne nur aufgrund Ihrer Vorstellungskraft beraten.
PS: Sie können auch Tipps zur Verwendung einer anderen Schriftart geben, um besser hervorzuheben.
Antworten:
Wie wäre es als Alternative zu den bereits großartigen Antworten mit einem schwarzen Div mit 50% Deckkraft hinter dem Text?
Dies würde es der Schriftart ermöglichen, im Grunde genommen auch mit jedem Bild zu arbeiten.
BEISPIEL
quelle
Ich schlage vor, die Schriftart fett zu machen (nur eine Änderung der Gewichtung, nicht der Schriftart selbst) und den Schatten neu festzulegen, damit alle Ränder der Buchstaben definiert werden:
Sie können sogar mehr als einen Textschatten kombinieren , um einen eindeutigen Umriss sowie eine Unschärfe zu erstellen:
quelle
text-shadow
von Ihnen bereitgestellte zusammen mit der SaturnsEye-Lösung zu verwenden.Geben Sie ihm einen schwarzen transparenten Hintergrund und etwas Polsterung
Spielen Sie einfach ein bisschen mit diesen Zahlen herum, aber es sollte Ihnen ein brauchbares Ergebnis bringen.
quelle
opacity
Eigenschaft in diesem Fall nicht hilft, während das Festlegen der Deckkraft in derbackground-color
Eigenschaft die Arbeit erledigt. Wie hier