Buchstaben mit Schatten. Texteffekte HTML und CSS

Beschreibung

Fügt dem Text den Schatten hinzu und legt auch seine Parameter fest: die Farbe des Schattens, der Versatz relativ zur Inschrift und des Unschärferadius. Die TEXT-Shadow-Eigenschaft kann in Verbindung mit Pseudo-Elementen arbeiten: Erster Buchstaben und: Erstzeile.

Syntax

textschatten: Keine | Shadow [, Shadow] *
Wo ist der Schatten:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Werte

Keine bricht den Zugabe von Farbton ab. Farbschatten in einem beliebigen CSS-Format. Standardmäßig stimmt die Farbe des Schattens mit der Farbe des Textes zusammen. Optionaler Parameter. Verschieben Sie mit x die Schirmverschiebung horizontal relativ zum Text. Der positive Wert dieses Parameters setzt die Schattenverschiebung nach rechts, negativ - nach links. Obligatorischer Parameter. Verschieben Sie die y-Verschiebung des Schattens vertikal relativ zum Text. Es ist auch zulässig, einen negativen Wert zu verwenden, der den Schatten über dem Text erhöht. Obligatorischer Parameter. Der Radius setzt den Radius der Schattenunschärfe. Je größer dieser Wert, desto stärker ist der Schatten glätt, breiter und leichter. Wenn dieser Parameter nicht angegeben ist, ist der Standardeinsatz auf 0 gesetzt. Beachten Sie, dass der Glättungsalgorithmus in Browsern normalerweise unterschiedlich ist, sodass die Art des Schattens je nach Art variieren kann angegebene Parameter Glätten.

Es darf mehrere Schattenparameter angeben, um sie miteinander zu trennen. Die folgende Reihenfolge wird in CSS3 berücksichtigt: Der erste Schatten in der Liste befindet sich ganz ganz oben, der letztere in der Liste ist ganz unten. In CSS2 ist die Reihenfolge im Gegenteil: Der erste Schatten ist an der Unterseite platziert, und der letzte ist ganz oben.

HTML5 CSS2.1 CSS3 IE CR OP OP SA FX

textschatten.

Würde Cytrus im Süden leben? Ja, aber eine falsche Instanz!

Das Ergebnis des Beispiels ist in Fig. 2 gezeigt. einer.

Feige. 1. Art des Schattens im Safari-Browser

Browser

Opera unterstützt maximal 6-9 Farbtonparameter. Erhöhung dieses Werts sowie eine Erhöhung des Unschärferadius über 100px beeinflussen die Produktivität des Browsers. Die Opera-Version 9.5-10 verwendet eine Abbildung mehrerer Schatten wie in CSS2.

Safari auf Version 4.0, nur ein Schattenparameter wird unterstützt, der Rest wird ignoriert. Mit Version 4.0 gibt es bereits viele Schatten.

Der Internet Explorer-Browser versteht das Text-Shadow-Eigenschaft nur aus Version 10.0. Verwenden Sie stattdessen die Filtereigenschaft: Shadow-Eigenschaft. Zum Beispiel setzt das folgende Design die Farbe des Farbtons (# 666666), seine Richtung (45 ° von der Vertikal) und dem Verdrängungswert (4 Pixel).

filter: Schatten (Farbe \u003d # 666666, Richtung \u003d 45, Stärke \u003d 4);

Die Text-Shadow-Eigenschaft wird verwendet, um den Text dem Text hinzuzufügen. Textschatten ist ein interessantes Werkzeug, mit dem Sie erstaunliche Effekte erstellen können. Schatten können einschichtig oder mehrschichtig, verschwommen, farblich oder transluzent sein. Festlegen des Schattens für das Element, Sie können nur eine Länge und Farbe angeben, wodurch eine Farbkopie eines separaten Symbols oder eines bestimmten Wortes erstellt wird.

So erstellen Sie den Schatten für Text

Browser unterstützen.

Dh: 10.0
KANTE: 12.0
Feuerfuchs: 3.5
Chrom: 4.0
Safari: 4.0
Oper: 10.1
iOS-Safari: 3.2
Android-Browser: 2.1
Chrom. für Android: 55.0

1. Text-Shadow-Eigenschaften Syntax

Jeder Schatten wird sowohl dem Text selbst als auch für die Elemente seines Designs (der Text-Dekoration-Eigenschaft) verwendet. Gleichzeitig können Sie mehrere Schatten einstellen, indem Sie sie durch das Komma zeigen. Schatten sind einander überlagert, aber der Text selbst überlappt sich nicht. Der erste Schatten befindet sich immer oben über den anderen Schatten. Die Immobilie wird vererbt.

Jeder Schatten wird durch zwei oder drei Längenwerte bestimmt (der dritte Wert ist obligatorisch) und die Farbe (optionaler Wert). Wenn der Farbschirm nicht angegeben ist, wird die Farbe des Textes verwendet.

Die erste Länge stellt den Versatz entlang der X-Achse ein, der zweite ist der Versatz entlang der y-Achse. Wenn die Längen negativ sind, wird der Schatten nach links und oben vom Text verschoben.

Der dritte Wert legt den Unschärfradius fest, der als Abstand von der Schirmkreislauf an der Kante des Unschärfeffekts definiert ist.

Feige. 1. Text-Shadow-Eigenschaften Syntax

textschatten.
Werte:
x-Offset.	Obligatorischer Wert. Verdrängung des Farbs horizontal relativ zum Text. Es kann sowohl positive als auch negative Werte annehmen.
y-offset.	Obligatorischer Wert. Verschiebung des Schattens vertikal relativ zum Text. Es kann sowohl positive als auch negative Werte annehmen.
verwischen	Optionaler Wert. Bestimmt den Radius der Schattenunschärfe. Je mehr Radius ist, desto stärker ist der Schatten verschwommen.
farbe	Optionaler Wert. Standardmäßig dauert die Farbe des Textes. Um einen Wert herzustellen, können Sie die folgenden Farbaufzeichnungsformate verwenden: #RRGGBB, RGB (rot, grün, blau), RGBA (rot, grün, blau, alpha).
keiner	Der Standardwert bedeutet das Fehlen eines Textschirms. Entfernt den Schatten des Elements von der Gruppe von Elementen mit einer bestimmten Eigenschaft.
Initiale	Legt den Standard-Eigenschaftswert fest.
erben.	Erbt den Wert der Eigenschaft aus dem Mutterelement.

2. Beispiele für Schatten für Text

2.1. Plakatschatten

Schatten des Textes

Text-Shadow-1 (Hintergrund: # 77F7DE; Farbe: weiß; Text-Shadow: -2px -2px 0 # 4D4644, 2Px -2px 0 # 4D4644, -2px 2Px 0 # 4D4644, 2Px 2Px 0 # 4D4644, 4PX 4PX 0 Weiß, 5px 5 px 0 weiß, 6px 6px 0 weiß; Briefabstand: 0.1EM;)

2.2. 3D Schatten

Schatten des Textes

Text-Shadow-2 (Hintergrund: Lineargradient (-45DEG, # fee864, # F5965E); Farbe: # F4F4F4; Textschatten: -1px -1px weiß, 1px 1px grau, 2px 2px # 7A7A7A, 3PX 3PX # 757575 , 4px 5 px # 666666, 6px 6px # 666666, 7px 7px # 616661, 8px 8px # 5c5c5c, 9px 9px # 575757, 10px 10px # 525252, 11px 10px # 4D4D4D, 18px 18px 30px RGBA (0, 0, 0, .4) , 18px 18px 10px RGBA (0, 0, 0, .4);)

2.3. Schattentext

Schatten des Textes

Text-Shadow-3 (Hintergrund: # FFE6DB; Farbe: # FFE6DB; Buchstaben-Tuch :.1EM; Textschatten: 3Px 0 RGBA (250, 111, 142, .5), 6px 0 RGBA (250, 111, 142 ,.4), 9px 0 RGBA (250, 111, 142 ,.3), 12px 0 RGBA (250, 111, 142, 0,2), 15px 0 RGBA (250, 111, 142, .1);)

2.4. Retro-Schatten

Schatten des Textes

Text-Shadow-4 (Farbe: # FB631E; Brieftrakt: .1EM; Textschatten: 4PX 4PX WHITE, 6PX 6PX # D7CC88;)

2.5. Mehrschichtschatten

Schatten des Textes

Text-Shadow-5 (Hintergrund: # F1f1f1; Farbe: # FCC105; Brief-Tuch: .1EM; Textschatten: 4px 4px # FF981D, 7px 7px RGBA (200, 120, 6, 0,2);););)

2.6. Transparenter Schatten

Schatten des Textes

Text-Shadow-6 (Farbe: transparent; Textschatten: 4PX -4px RGBA (157, 217, 227, 0,7), -2px -2px RGBA (159, 141, 105, 0,7), 0 2px RGBA (254 216, 21, .7);)

2.7. Schattenzebra.

Schatten des Textes

Text-Shadow-7 (Hintergrund: # E02A91; Farbe: Weiß; Textschatten: 2px 2Px schwarz, 4px 4px weiß, 6px 6px schwarz, 8px 8px weiß, 10px 10px schwarz, 12px 12px weiß, 14px 14px schwarz, 16px 16px weiß , 18px 18px schwarz, 20px 20px weiß, 22px 22px schwarz, 24px 24px weiß, 26px 26px schwarz;)

2.8. Neonschatten

Schatten des Textes

Text-Shadow-8 (Hintergrund: Schwarz; Farbe: weiß; Text-Shadow: 0 0 5px weiß, 0 10px weiß, 0 0 15px weiß, 0 0 20px purpurrot, 0 0 35px crimson, 0 0 40px purpurrot, 0 0 50px Crimson, 0 0 75px Crimson;)

2.9. Schattenhub

Schatten des Textes

Text-Shadow-9 (Farbe: Weiß; Textschatten: 1Px 1Px # 732372, 1Px -1px # 732372, -1px 1Px # 732372, -1px -1px # 732372, 3Px 3Px 6Px RGBA (0,0,0, fünf) );)

2.10. Letterpress-Stil.

Schatten des Textes

Text-Shadow-10 (Hintergrund: # F9C941; Farbe: # F9C941; Brieftrakt: 2px; Textschatten: 1Px 1Px # F3E7CF, -1px -1px # 56433D;)

2.11. Twitter-Stil

Schatten des Textes

Text-Shadow-11 (Farbe: # 3CF; Text-Shadow: -1px 0 1px weiß, 0 -1 px 1px weiß, 0 1px 1px weiß, 1px 0 1px weiß, 0 0 8px weiß, 0 0 8px weiß, 0 0 8px Weiß, 2px 2px 3px schwarz;)

2.12. Schatten mit Schlaganfall.

Schatten des Textes

Text-Shadow-12 (Farbe: # E34C38; Textschatten: 1px 1px weiß, 2px 2px weiß, -1px -1px weiß, -2px -2px weiß, -1px 1px weiß, 1px -1px weiß, -2px 2px weiß, 2px -2px weiß, -3px -3px 4px RGBA (0,0,0, .3), -3px 3PX 4PX RGBA (0,0,0, .3), 3PX 3PX 4PX RGBA (0.0.0 ,. 3) , 3px -3px 4px RGBA (0,0,0, .3);)

Beschreibung

Syntax

textschatten: Keine | Shadow [, Shadow] *
Wo ist der Schatten:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Werte

Keine bricht den Zugabe von Farbton ab. Farbschatten in einem beliebigen CSS-Format. Standardmäßig stimmt die Farbe des Schattens mit der Farbe des Textes zusammen. Optionaler Parameter. Verschieben Sie mit x die Schirmverschiebung horizontal relativ zum Text. Der positive Wert dieses Parameters setzt die Schattenverschiebung nach rechts, negativ - nach links. Obligatorischer Parameter. Verschieben Sie die y-Verschiebung des Schattens vertikal relativ zum Text. Es ist auch zulässig, einen negativen Wert zu verwenden, der den Schatten über dem Text erhöht. Obligatorischer Parameter. Der Radius setzt den Radius der Schattenunschärfe. Je größer dieser Wert, desto stärker ist der Schatten glätt, breiter und leichter. Wenn dieser Parameter nicht angegeben ist, ist der Standardeinstellung auf 0 gesetzt. Bitte beachten Sie, dass der Glättungsalgorithmus in Browsern normalerweise unterschiedlich ist, so dass die Art des Farbs in Abhängigkeit von den angegebenen Glättungsparametern etwas anders sein kann.

HTML5 CSS2.1 CSS3 IE CR OP OP SA FX

textschatten.

Würde Cytrus im Süden leben? Ja, aber eine falsche Instanz!

Das Ergebnis des Beispiels ist in Fig. 2 gezeigt. einer.

Feige. 1. Art des Schattens im Safari-Browser

Browser

Safari auf Version 4.0, nur ein Schattenparameter wird unterstützt, der Rest wird ignoriert. Mit Version 4.0 gibt es bereits viele Schatten.

filter: Schatten (Farbe \u003d # 666666, Richtung \u003d 45, Stärke \u003d 4);

Sogar der grünste Designer weiß, wie man Schatten in Photoshop herstellt. Die Schatten geben das Designvolumen und jetzt ist es sehr beliebt. Keine Ausnahme und Schatten für Texte, Menüpunkte und Schlagzeilen. Genug, um sich an Apple-Schnittstellen zu erinnern

Es wird nützlich sein, in ihren Arsenal-Techniken zu haben, die Fähigkeiten mit Schatten für Text arbeiten.

Eine Aufgabe

Machen Sie einen Schatten für Text mit CSS, ohne die Verwendung von Bildern. Was erreichen wir das?

flexibilität - ohne Bilder zu verwenden, ist Text leicht zu wechseln
geschwindigkeit - weniger Bilder - Wenigeres Seitengewicht, weniger Anrufe an den Server
SEO - Text. bessere Bilder Optimiert und zuverlässig als die Verwendung von Textsetechnik-Bild

Textschatten für normale Browser

Unter normalen Browsern wurden alle modernen Browser getroffen, wodurch mehr oder weniger mit den Empfehlungen von W3C schritt. In diesem Fall verstehen diese Browsern den CSS3-Eigenschaft-Text-Shadow, der 2003 wiederempfohlen wurde.

Also eine Liste von Browsern, die die Text-Shadow-Eigenschaft unterstützen:

Safari 3.1 (Mac / Win) - unterstützt, mehrere Schatten werden nicht unterstützt.
Safari 4 (Mac / Win) - unterstützt vollständig
Opera 9.5+ (Mac / Win / Lin) - Wartung vollständig
Firefox 3.1 / 3.5 (Mac / Win / Lin) - Unterstützt vollständig
Google Chrome 2 (Win) - unterstützt vollständig
Shiira (Mac) - Unterstützt mehrere Schatten werden nicht unterstützt.
Konqueror (lin / mac / win) - unterstützt vollständig
iCAB (MAC) - Unterstützt mehrere Schatten werden nicht unterstützt.
Safari auf iPhone - Unterstützung, mehrere Schatten werden nicht unterstützt.
Nokia Symbian-Smartphones (Serie 60) - Unterstützt
Opera Mini 4.1 - unterstützt, unterstützt nicht die Unschärfe des Schattens

Für diese Browser ist der Schattenstext nur eine Zeile in CSS:

H1 (Textschatten: 0px 1Px 3PX # 000;)

Wir bekommen einen so modischen Titel:

Mit Hilfe von Textschatten können Sie verschiedene interessante Effekte erreichen.

Unscharfer Text

H1 (Farbe: #FFF; Hintergrund: # 666; Textschatten: 0px 0px 3Px #FFF;)

Vervielfältigung von Text.

H1 (Textschatten: 0px 20px # 000;)

Mehrere Schatten ermöglichen viele weitere Effekte:

Deprimierter Text

H1 (Hintergrund: #ccc; Farbe: #ccc; Textschatten: -1px -1px # 666, 1px 1Px #FFF; Font-Face: SeriF;)

Konvexer Text

H1 (Hintergrund: # 999; Farbe: # 999; Textschatten: 1Px 1px 3Px # 666, -1px -1px 3Px #FFF, 1px 1px # 666, -1px -1px #FFF; Font-Face: SeriF;)

(Dh es erlaubt Ihnen nicht, Schönheit zu genießen, weil der Textschatten nicht unterstützt). Sie können immer noch verschiedene Effekte mit Text-Shadow aufstellen, Sie können noch Messe, die einzige praktische Einschränkung ist Ihre Fantasie.

Jetzt über traurig - was ich mit heißem alles zu tun hat "Favorit", dh?

Textschatten in IE

Obwohl dies bis zur 8. Version den Textschatten nicht versteht, hat es genug von seinem "Lamm". Insbesondere gibt es einen Drophadow-Filter (), um Schatten zu erstellen. Damit die Schatten erscheinen, muss das Element eingerichtet sein. Sie können auf verschiedene Weise einstellen:

durch Angabe des Eigenschaftselements: Block + Höhe () oder Breite ())
durch Einstellen eines Elements: absolut
einstellung: links / rechts
zoom einstellen: 1

H1 (Filter: Progid: dximagetransform.microsoft.dropshadow (color \u003d "# 666666", offx \u003d 2, offy \u003d 2, positiv \u003d "true"); Zoom: 1;)

Es schien, dass Sie "Hurray" schreien könnten !!! " Und freue dich im Leben, aber sehen Sie, wie dieser Filter in der Realität funktioniert:

So erscheint der Text, wenn der Dropshadow-Filter darauf angewendet wird.

Für diejenigen, die nicht verstehen, ist der Mangel an Mangel an diesem Filter:

schatten sieht schrecklich aus: Winkel, kein glatter, mit durchscheinender Übergang zum Hintergrund
die Schrift-Inschrift ist verzerrt
shadow ist praktisch nicht der Verordnung (Sie können die Schattenposition nur verwalten) - es kann den Schattenfilter anstelle von DropsHadow teilweise umgehen, aber die kritischen ersten beiden Mängel bleiben jedoch
obligatorische Anwesenheit des Layouts etwas begrenzt den Entwickler

Dieses Ergebnis ist in echten Projekten nicht akzeptabel. Es ist nicht klar, wer und wie solche Arbeit für Entwickler akzeptiert.

Kilian Valkhof schlug mit Schattenemulation vor:

wenden Sie keinen Filter direkt an den Text an
verwenden Sie anstelle von Dropshadow- und Schattenkombination von Glühen und Unschärfe

Dadurch wird die Verzerrung des Textes vermieden und den Farbton flexibler machen.

TestkopfТестовый заголовок

H1 (Textschatten: 3Px 3Px 3Px #CCCCCC; Position: relativ; Zoom: 1; Farbe: # 000;) H1-Spanne (Position: Absolut; links: -3px; oben: -3px; Z-Index: -1; Filter: Progid: dximagetransform.microsoft.Glow (color \u003d # CCCCCC, Stärke \u003d 1) ProgID: dximagetransform.microsoft.blur (pixelradius \u003d 3, enabled \u003d "true"); Zoom: 1;)

Aber auch bei einem solchen Ansatz gibt es noch eine Reihe von Nachteilen:

nonsertic Code - ein zusätzliches Element, und selbst mit der Duplizierung des Textes beeinflusst die logische Struktur des Inhalts nicht, SEO-Optimierung.. Dieses Problem kann mit gelöst werden verwenden von JavaScriptdas wird beim Laden der Seite für dh ein zusätzliches Element eingefügt
nicht angemessene Anzeige in anderen Browsern (welcher Text-Shadow-Verständnis) - Filter ermöglichen den Schatten mit minimalen Einstellungen. Ähnliche Schatten mit anderen Browsern erreichen nicht immer
kleine Flexibilität - Filter werden beispielsweise nicht alle Funktionen von Text-Shadow angeben, beispielsweise ist es nicht möglich, mehrere Schatten zu realisieren

Um Schatten für IE zu erstellen, können Sie JavaScript verwenden (nicht zum ersten Mal JavaScript speichert)

Schatten für Text mit Javascript

Von den Skripts, die getestet haben, stoppte ich für mich am Plugin für Jquery "Drop Shadow". Seine Vorteile:

emuls Die Schatten, die den Einsatz eines Satzes von Zufriedenern verwenden, d. H. Ohne Filter für IE. Dies ermöglicht es, die ähnlichsten Schatten in IE mit anderen Browsern zu erstellen + nicht, um sich um das Layout sorgen zu können
erzeugt Schatten nicht nur für dh, was manchmal nützlich sein kann
kleines Gewicht des Skripts - 4kb (wenn Sie Kommentare aus dem Code löschen), und wenn Sie Komprimierung anwenden, ist es noch weniger. In der Schriftstelle des Skripts gibt es Anforderungen - die Anwesenheit eines jQuery.dimensions.js-Skripts, aber ich habe nicht verstanden, warum er. Schatten werden erstellt, gelöscht, identifiziert die ID und ohne ihn.
einfach und verständlich zu verwenden
sie können mehrere Schatten mit etwas Erfolg verlieren.

Nachteile:

sie können das Element-ID-Skript nicht initialisieren
wenn das Element vom Hintergrund angegeben ist, wird der Schatten nicht für den Text erstellt, sondern für das gesamte Element
obligatorische Verbindung der JQuery-Bibliothek (und das ist mehr als 50 kb). Die Beliebtheit von Jquery beweist jedoch praktisch diesen Fehler
das Skript Asien ist auch erforderlich, um jQuery.Dimensions.js (2KB mehr) zu verbinden. Aber ich habe nicht verstanden, warum diese Bibliothek, es scheint, und alles funktioniert ohne es gut

Anwendung des Drop-Shadow-Plugins

Syntax:

Jquery (selektor) .dropshadow (Optionen); // Erstellen eines Schattens am JQuery-Element (Selektor) .redrawshadow (); // Redrawing Shadow Jquery (Selektor) .removeshadow (); // Löschen des Schattens von Jquery (Selektor) .shadowid (); // Gibt die Elementschatten-ID zurück

Links: [Integer] (Defauger] (Standard \u003d 4) oben: [integer] (Standard \u003d 4) Unschärfe: [Integer] (Standard \u003d 2) Deckkraft: [Fraktionierzahl] (Standard \u003d 0,5) Farbe: [Zeile] (Default \u003d " Schwarz ") Swap: [logischer Wert] (Standard \u003d False)

Links- und Top-Parameter - Die Koordinaten des Schattens in der oberen linken Ecke der Inschrift (oder des Objekts). Positive Werte verschieben den Schatten nach rechts und unten, negativ - links und oben.

Typografie - mein Lieblingsspielzeug, wenn es um Webdesign geht. Es wäre mehr, mit seiner Hilfe, Sie können die Aufmerksamkeit einer Person auf sich ziehen, nur ein wenig Ändern der Inschrift oder eines Schriftkastens. Sehr einfach und sehr effektiv, viele Bücher sind auf diesem Thema geschrieben, und es gibt einige Exemplare in Streitigkeiten. Heute werde ich nicht als Ganzes Ratschläge geben - ich habe nicht genug Qualifikationen, aber wie man einen Text Ihrer Website erstellt - es ist immer bitte. Heute werde ich heute mehrere Variatoren mit den CSS3-Eigenschaften anzeigen textschatten., sehr einfach, aber in geschickten Händen kann es Wunder arbeiten.

Text-Shadow Basic Syntax

Diese Liegenschaft CSS3. Funktioniert in allen neuen Browsern, ohne Anbieterpräfixe wie -Moz und -webkit. Selbst dh kann gelernt werden, dieses Eigentum zu verstehen, müssen Sie Modernizr oder Analoga verwenden.

Textschatten: X-Shift-U-Offset-Unschärfefarbe;

Das ist alles die grundlegende Syntax. Der erste Wert ist der horizontale Versatz, der zweite - vertikal, die Unschärfe des Schattens und die Farbe des Schattens. Betrachten Sie ein Beispiel:

Textschatten: 2PX 4PX 3PX RGBA (0,0,0,0.3.3);

Der Schatten wurde abgewiesen, auf 3 Pixeln verschwommen und schwarze Farbe mit Transparenz von 30% verschrieben. Warum verwende ich einen Alphakanal oder eine Transparenz? Es gibt mehr Freiheit in Aktionen, Sie können ein wenig leichter oder dunkler machen, einfach den Wert der Transparenz zu ändern, ohne mit der Auswahl der Farbe flattern. Es stellt sich ziemlich schnell heraus, ich empfehle.

Gekaufte Briefe

Körper (Hintergrund: # 222;) #text H1 (Farbe: RGBA (0,0,0,0,0,0,6); Textschatten: 2px 2px 3Px RGBA (255,255,255,0,0,1););););)

Das Prinzip der Arbeit hier ist ein solcher Hintergrund einer kleinen leichteren Buchstaben, ein heller Schatten mit einer kleinen Transparenz. Das Ergebnis ist auf dem Bild, versuchen Sie es.

Starrer Schatten

Textschatten: 6PX 6PX 0PX RGBA (0,0,0,0,0.2);

Nun im Mode-Retro-Stil, und es wird nur ein Schatten ohne Unschärfe verwendet. Nun, wir sind bereit dafür

Doppelter Schatten

Textschatten: 4PX 3PX 0PX #FFF, 9PX 8PX 0PX RGBA (0,0,0,0,0.15);

Und hier ist ein weiteres kniffliges Eigentum textschatten.Selektoren können über Kommas übertragen werden, wodurch so viele Schatten wie nötig erstellt werden. Der erste Schatten kann eine Farbe wie einen Backologen zugewiesen werden, dann wird es einen Effekt geben, wie auf dem Bild.

Runter und weg

Textschatten: 0px 3Px 0PX # B2A98F, 0PX 14PX 10PX RGBA (0,0,0,0,0,0,0,05), 0px 24px 2PX RGBA (0,0,0,0,0,0,0,0,0,0,0,0,0,0 , 0,2), 0px 34px 30px RGBA (0,0,0,0,0.1);

Der Text ist volumetrisch und wie es über dem Hintergrund hängt, ist es nicht? Es gibt 4 Schatten mit unterschiedlichen Unschärfe und Lage. Im Allgemeinen werden desto mehr Schatten verwendet, der realistische Effekt, berücksichtigen Sie ihn in Ihren Projekten.

Kleiner Text 3D.

Textschatten: 0PX 4PX 3PX RGBA (0,0,0,0, 4,4), 0px 8px 13px RGBA (0,0,0,0,0,0,0,0,0,2), 0px 18px 23px RGBA (0,0,0 , 0,0,0);

Ähnlich wie das vorherige Beispiel, drei Schatten, sind jedoch näher, somit der Effekt der Dreidimensionalität und des Textilgewichts.

3D-Text von Mark Dotto

Textschatten: 0 1px 0 #ccc, 0 2px 0 # c9c9c9, 0 3px 0 #bbb, 0 4px 0 # B9B9B9, 0 5px 0 #AAA, 0 6px 1px RGBA (0,0,0, .1), 0 0 5px RGBA (0,0,0, .1), 0 1PX 3PX RGBA (0.0.0, .3), 0 3PX 5PX RGBA (0,0,0, 0,2), 0 5px 10px RGBA (0, 0,0 ,.25), 0 10px 10px RGBA (0,0,0, 0,2), 0 20px 20px RGBA (0,0,0, .15);

Ich stieß auf das Netzwerk, um diesen Designer zu arbeiten und konnte nicht vorbeifahren. Beeindruckend realistisch.

Armuttext aus Gordon Hall

Hintergrundfarbe: # 666666; -Webkit-Background-Clip: Text; -Oz-Hintergrund-Clip: Text; Hintergrundclip: Text; Farbe: transparent; Textschatten: RGBA (255,255,255,0,5) 0Px 3PX 3PX;

Ein weiteres Beispiel für eindrucksvolle Arbeit mit der Immobilie textschatten.. Das Prinzip ist jedoch derselbe wie ich oben gesagt habe. Etwas leichterer Hintergrund, heller Schatten unter Buchstaben und dunkel oben. Einfach gemacht, aber sehr cool.

Text leuchten

Textschatten: 0px 0px 6px RGBA (255,255,255,0,7);

Auch hier ist alles einfach - der Schatten wechselt nicht, wir schlucken mehr komfortabel und machen es weiß. Das ist alles Glanz.

Retro-Stil

Textschatten: -10px 10px 0px # 00e6e6, -20px 20px 0px # 01cccc, -30px 30px 0px # 00BDBD;

Ich sprach über den obigen Retro-Stil, es ist von derselben Oper. Jetzt so modische, mehrere klare Schatten. Nach eigenem Ermessen bewerben

Mehrere Lichtquellen

Textschatten: 0px 15px 5px RGBA (0,0,0,0,0,0,0,0), 10px 20px 5Px RGBA (0.0.0.0.05), -10px 20px 5px RGBA (0.0.0.0.05);

Hier der Effekt mehrerer Lichtquellen, die Schatten in alle Richtungen geben.

Konvexer Text

Farbe: RGBA (0,0,0,0,0,6); Textschatten: 2PX 8PX 6PX RGBA (0,0,0,0,2), 0px -5px 35px RGBA (255,255,255,0,3);

Der gepresste Text war bereits, jetzt konvex. Eine ziemlich einfache Wirkung, aber zum Beispiel sieht es sehr schön aus. Benutze, try.

Abschließend möchte ich sagen - cSS3 Text-Shadow-Eigenschaft Sehr einfach, wie Sie es schon sicherstellen könnten. Aber kompetent, und mit einer kleinen Fantasie können Wunder arbeiten.
Experiment, erfolgreich Sie

Drucken

Auch interessant:

Der Laptop ist sehr heiß, nachdem Windows 10 den Prozessor stark erwärmt

Welches Netzteil ist von modernen Spiel-PC-CPU-Stromverbindern erforderlich?

Warum der Computer nicht einschaltet und wie Sie feststellen sollen, was pleite

Wir empfehlen das Lesen:

2021-05-23 11:48:12

Warum nicht einen Laptop starten, was soll ich tun?

2021-05-23 11:48:12

HP Laptop nach dem Update lässt sich nicht einschalten

2021-05-23 11:48:12

Was tun, wenn Windows 8 nicht startet

Fortsetzung des Themas:

W-lan

Warum das Ladegerät beim Laden des Telefons erhitzt wird

Zu wissen, warum das Telefon erhitzt wird, kann der Benutzer versuchen, seine Temperatur zu reduzieren. Dies wird dazu beitragen, eines der häufigsten Probleme zu lösen - obwohl er damit konfrontiert ist ...