X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

How To Text Shadows in CSS3 erstellen
Übersetzt von Google Translate

Wie ich in meinem Tutorial erwähnt auf die Rundung der Ecken, CSS3 bietet eine Menge tolle neue Features, wie mehrere Spalten, Farbverläufe und natürlich grenzüberschreitenden Auswirkungen. In diesem Tutorial werden wir einen Blick auf ein weiteres neues Feature, Erzeugen von Schlagschatten auf Text.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Schritt 1

Um mit diesem Effekt zu beginnen, zu finden oder erstellen Sie einen CSS-Regel, die Sie gerne den Text Schatten anwenden möchten. Wahrscheinlich der beste Weg, um hiervon Gebrauch machen würden, um eine Klasse der Regel erstellt, das speziell für die Anwendung dieser Effekt. Das ist, was ich ohnehin tun. Ich habe auch ein bisschen Formatierung meinen Text mit einer neu definierten Absatz-Element angewendet.

Schritt 2

Nun fügen Sie die "text-shadow"-Eigenschaft, um die Regel. Es gibt vier Werte, die wir auf die "text-shadow"-Eigenschaft anwenden können. Erstens, in einer Farbe hinzuzufügen. Sie können jede Farbe, die Sie mögen, so würde zwar Schlagschatten sind in der Regel ziemlich dunkel. Wenn Sie Ihre Datei speichern und überprüfen Sie Ihre Arbeit in Ihrem Browser, werden Sie feststellen, dass nichts passiert. Das ist, weil wir einige zusätzliche Eigenschaften ersten Satz haben.

Schritt 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

Der zweite Wert steuert die vertikale Position des Schattens. Ein positiver Wert hier bewegt sich der Schatten nach unten, während ein negativer Wert bewegt sich nach oben.

Der dritte Wert steuert den Grad der Weichzeichnung auf der Schattenseite. Verwenden Sie einen niedrigeren Wert für eine schärfere Schatten oder einen höheren Wert für eine verschwommene Schatten. Wie Sie sehen können, ziehe ich mit relativ niedrigen Werten.

Und das ist alles zu schaffen, Text-Schatten in CSS3! Setzen Sie Ihre CSS Lernen Reise, indem Sie aus dem Tutorial unter:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link