Die Schaffung eines weißen Buchstabeneffekts mit einem schwarzen Umriss wird von Webdesignern häufig verwendet, um Text lesbarer und attraktiver zu machen. Dieser Effekt ist besonders bei Überschriften, Logos, Bannern und anderen Designelementen beliebt. Möchten Sie wissen, wie Sie ein solches Ergebnis erzielen können? In diesem Artikel erfahren Sie mehr über verschiedene Möglichkeiten, weiße Buchstaben mit einem schwarzen Umriss zu erstellen.
Der erste Weg besteht darin, die CSS-Eigenschaften text-shadow und color zu verwenden. Um einen Umriss um weißen Text zu erstellen, müssen Sie zwei Werte für die text-shadow-Eigenschaft angeben: legen Sie zuerst den horizontalen und vertikalen Schatten-Versatz auf 0 fest, und legen Sie dann den Unschärfenradius auf den Wert für die Breite und Höhe der Kontur fest. Geben Sie dann die Hintergrundfarbe über die color-Eigenschaft an. Auf diese Weise erhalten Sie einen weißen Buchstabeneffekt mit einem schwarzen Umriss auf Ihrer Website.
Der zweite Weg ist die Verwendung von Photoshop. Laden Sie eine Textebene mit weißen Buchstaben auf Ihr Layout. Wählen Sie dann das Ebenenstil-Werkzeug im Ebenenbedienfeld aus und fügen Sie einen äußeren Umriss hinzu. Stellen Sie die gewünschte Konturfarbe ein - Schwarz - und wählen Sie die gewünschte Konturbreite aus. Diese Methode ermöglicht eine schnelle und effiziente Erstellung weißer Buchstaben mit schwarzem Umriss in Photoshop.
Wie ändere ich die Farbe der Buchstaben in Weiß mit einem schwarzen Umriss?
Wenn Sie die Farbe der Buchstaben in Weiß mit einem schwarzen Umriss in Ihrer Website ändern müssen, können Sie spezielle CSS-Eigenschaften verwenden.
Hier sind einige Möglichkeiten, wie Sie dies tun können:
| CSS-Eigenschaft | Die Beschreibung |
| color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; | Legt die Farbe des Buchstabens auf Weiß fest und fügt einen schwarzen Umriss um den Buchstaben hinzu. |
| color: white; -webkit-text-stroke: 1px black; | Legt die Farbe des Buchstabens auf Weiß fest und fügt einen schwarzen Umriss um den Buchstaben hinzu. |
Sie können diese CSS-Eigenschaften für ein bestimmtes Element auf einer Seite verwenden, indem Sie seinen Selektor in den Stilregeln angeben.
h1 color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
>
Auf diese Weise können Sie die Farbe der Buchstaben in Weiß mit einem schwarzen Umriss in Ihrer Website ändern.
Methode 1: Verwenden der text-Stroke-Eigenschaft
Eigenschaft text-stroke legt die Breite und Farbe des Textstrichs fest. Damit die Buchstaben weiß sind, müssen Sie einen Wert festlegen white oder transparent für die Textfarbe. Um eine schwarze Kontur zu erstellen, müssen Sie einen Wert festlegen 1px für die Pinselbreite und black für die Strich-Farbe.
.text-with-outline color: white; -webkit-text-stroke: 1px black; text-stroke: 1px black;>Wenden Sie eine Klasse an .text-with-outline zu dem Element mit dem Text, den Sie weiß mit einem schwarzen Umriss machen möchten.
Methode 2: Verwenden der text-shadow-Eigenschaft
Sie können zwei Werte für die Text-shadow-Eigenschaft festlegen, um einen weißen Buchstabeneffekt mit einem schwarzen Umriss zu erzeugen: einen für einen weißen Schatten und einen für einen schwarzen Umriss.
Текст с белыми буквами и чёрным контуромIn diesem Beispiel geben wir die Buchstaben weiß an und fügen vier Schatten hinzu: eine von oben und links, eine von oben und rechts, eine von unten und links und eine von unten und rechts. Auf diese Weise erzeugen wir einen schwarzen Umriss-Effekt um weißen Text.
Die Werte -1px und 1px legen den Versatz für jeden Schatten fest, so dass sie sich neben dem Text befinden. Der Wert 0 gibt an, dass der Schatten nicht unscharf ist. Die Schattenfarbe wird im RGB-Format festgelegt (#000 ist schwarz).
Mit der text-shadow-Eigenschaft können Sie verschiedene Effekte für Text erstellen, einschließlich unterschiedlicher Kontur- und Schattenfarben sowie unterschiedliche Abstände und Unschärfen.
Methode 3: Verwenden von CSS-Filtern
Um zu beginnen, legen Sie die Textfarbe mit der color-Eigenschaft auf Weiß fest:
| Eigenschaft | Bedeutung |
|---|---|
| color | white |
Fügen Sie dann mithilfe der Text-Stroke-Eigenschaft einen Umriss zum Text hinzu:
| Eigenschaft | Bedeutung |
|---|---|
| text-stroke | 2px black |
Jetzt müssen Sie einen CSS-Filter anwenden, der die Textfarbe wieder in Schwarz ändert. Dazu können Sie die filter-Eigenschaft und den invert-Wert verwenden:
| Eigenschaft | Bedeutung |
|---|---|
| filter | invert(1) |
Am Ende sieht der Text in weißen Buchstaben mit einem schwarzen Umriss aus. Sie können die Konturstärke und die Textfarbe sowie andere Parameter anpassen, um den gewünschten Effekt zu erzielen.
