Typografie ist jedermanns Lieblingsspielzeug im Webdesign. Ein besonders unterhaltsames Werkzeug, das CSS Ihnen bietet, um mit Ihrem Typ zu spielen, ist Text-Schatten, was anfangs einfach erscheint, aber mit ein wenig Einfallsreichtum und Kreativität bemerkenswerte Effekte erzeugen kann.
Heute werden wir mehrere durchlaufen Text-Schatten Beispiele, die Sie für Ihre eigene Arbeit kopieren und einfügen können.
Der grundlegende Schatten
Das Text-Schatten Eigenschaft ist super einfach zu arbeiten und funktioniert gut in allen modern Browser ohne auch nur ein Herstellerpräfix! Wenn Sie jedoch Tools wie Modernizr verwenden, können Sie selbst in älteren Browsern erweiterte CSS3-Effekte erzielen, wenn Sie Unterstützung für den Fallback-Modus benötigen.
Syntax
Die Syntax zum Erstellen eines einfachen Text-Schatten wird unten gezeigt. Sie haben vier Variablen, mit denen Sie arbeiten können. Die ersten beiden bestimmen die Position des Schattens, die dritte Einstellung die Unschärfe und die vierte die Farbe des Schattens.
Um dies in die Tat umzusetzen, hier ein Beispiel mit einem Schatten, der um zwei Pixel nach rechts und vier Pixel nach unten verschoben wurde, mit einer Unschärfe von drei Pixeln und einer Farbe von Schwarz bei 30% Deckkraft.
Hier ist das Ergebnis dieses Codes, ein netter einfacher Schatten, der von sich aus sehr ansprechend ist.
Warum rgba?
Kurz gesagt, Sie müssen rgba nicht für die Farbe Ihres Schattens verwenden, sondern können alle CSS-Farbmethoden verwenden. Ich finde jedoch, dass rgba die ideale Farbeinstellung für einen Schatten ist, weil damit eine weitere Dimension hinzugefügt wird. Sie können nicht nur Position, Unschärfe und Farbe des Schattens festlegen, sondern auch die Deckkraft mithilfe des Alpha-Werts.
Dies ist eigentlich einfacher als bei anderen Farbmethoden, da Sie in der Regel nach einem anständigen Akzent für die Hintergrundfarbe suchen müssen, die vielleicht etwas dunkler oder heller ist. Mit rgba können Sie einfach Schwarz oder Weiß verwenden und die Deckkraft reduzieren, um sie mit dem Hintergrund zu verschmelzen.
Schneller und schmutziger Letterpress
Das Tolle an Text-Schatten ist, dass Sie mit ihnen tatsächlich viel mehr tun können als Ihr durchschnittlicher Schlagschatten. Hier ist zum Beispiel ein schneller Trick, um die Illusion eines eingeblendeten Textes zu erzeugen.
Als Erstes möchten Sie Ihre Textfarbe etwas dunkler als Ihre Hintergrundfarbe einstellen. Als nächstes ein leichtes Weiß auftragen Text-Schatten mit reduzierter Deckkraft.
Wie Sie sehen, habe ich eine Hintergrundfarbe von # 222 verwendet und dann den Text bei einer Deckkraft von 60% auf Schwarz gesetzt. Schließlich war mein weißer Schatten mit einer Deckkraft von 10% etwas nach unten und nach rechts positioniert.
Harter Schatten
Denken Sie daran, dass Sie Ihren Schatten überhaupt nicht verwischen müssen. Aufgrund ihres Retro-Charakters sind harte Textschatten tatsächlich sehr Jetzt können Sie also in Ihren Entwürfen experimentieren.
Doppelschatten
Der eigentliche Spaß beginnt, wenn Sie feststellen, dass Sie nicht auf einen einzigen Schatten beschränkt sind. Verwenden Sie ein Komma, um die Deklarationen zu trennen, können Sie beliebig viele Schatten anwenden.
Hier ist der grundlegende Überblick über die Syntax. Beachten Sie, dass nach den ersten beiden Schatten ein Komma und nach dem letzten Schatten ein Semikolon steht.
Um dies in die Praxis umzusetzen, hier ein Beispiel mit einer Textbehandlung, die Sie jetzt überall im Web sehen können. Grundsätzlich sollen zwei Schatten angewendet werden, von denen der erste die gleiche Farbe wie der Hintergrund hat.
Das Ergebnis ist fast ein Vintage-Zeitungsgefühl.
Down und Ferne
Sobald Sie sich wirklich in den Schatten befinden, werden die Ergebnisse schnell immer beeindruckender. Es ist sehr einfach, mit dem Erstellen einiger schöner 3D-Effekte zu beginnen, von denen Ihre mit Webdesign versierten Benutzer nicht glauben, dass es sich um Live-Text handelt.
Unten habe ich satte vier Schatten verwendet, die alle mit unterschiedlichem Abstand und Unschärfe gerade nach unten gerichtet waren.
Nah und schwer
Hier ist ein weiteres Beispiel für dieselbe Idee, diesmal mit drei Schatten, die viel näher an der Quelle gehalten wurden. Der Effekt lässt Ihren Text etwas gewichtiger erscheinen.
Eine kleine Hilfe
Bei der Suche nach dem, was andere Designer getan haben, habe ich zwei hervorragende Techniken gefunden, die ich für perfekt für diesen Beitrag hielt. Der erste kommt von Mark Dotto und der zweite von Gordon Hall.
Mark Dottos ernsthafter 3D-Text
Hier ist ein Beispiel, von dem ich immer gedacht habe, dass es wirklich beeindruckend ist. Es stammt von MarkDotto.com und verwendet beeindruckende zwölf separate Schatten, um einen sehr glaubwürdigen 3D-Effekt zu erzielen.
Gordon Hall's True Inset Text
Im obigen Beispiel habe ich meine Technik als "schnell und schmutzig" bezeichnet. Buchdruckeffekt. Das liegt daran, dass es einen viel komplexeren Weg gibt, ernsthaft eingeschränkten Text zu erstellen, der viel glaubwürdiger ist.
Gordon verwendet ein ernstes CSS-Voodoo, um nicht nur einen äußeren Schatten, sondern auch einen echten inneren Schatten zu erzeugen. In seinem Blog-Post finden Sie eine vollständige Erklärung der Technik.
Noch mehr lustige Schatten
Nun, da Sie ein gutes Gefühl für die Logik hinter dem Code haben, sind hier ein paar weitere Beispiele, die ich ohne langweilige Erklärungen aufgeschnappt habe. Fühlen Sie sich frei, sie zu stehlen und in Ihrer Arbeit zu verwenden!
Glühend
Superheld
Mehrere Lichtquellen
Weiche Prägung
Fazit
Wie die meisten CSS-Effekte lassen sich Text-Schatten in einer einfachen Form sehr einfach implementieren. Sie können jedoch verschiedene Formen annehmen, wenn Sie wirklich mit etwas arbeiten. Mit Kommas als Trennzeichen können Sie CSS-Schatten übereinander stapeln, um das Interesse und den Realismus des Effekts dramatisch zu erhöhen.