3D-Texteffekt mit CSS

Mal sehen wie es gehtWir brauchen:

• Grundkenntnisse in HTML und CSS
• Ein Code-Editor
• Unser Browser

Schritt 1

Wir werden einen Ordner auf unserer lokalen Site erstellen, um die Dateien zu speichern, die wir brauchen werden, ich nenne ihn "text_3d" darin, ein weiterer Aufruf von CSS
VERGRÖSSERN
VERGRÖSSERN

Schritt 2

Wir gehen zum Code-Editor und erstellen eine neue index.html-Datei, die wir im Stammverzeichnis des Ordners „3d_text“ speichern, den wir im vorherigen Schritt erstellt haben, in dem wir unsere grundlegende HTML-Struktur schreiben und die Referenz hinzufügen eine CSS-Datei namens "style.ccs", die wir später erstellen werden.
HTML Quelltext

Schritt 3

Wir fügen eine Zeile innerhalb des Körpers hinzu, in der wir ein Label platzieren

der wir die Klasse "3d-text" zuweisen, die wir dann in der .css-Datei erstellen, werde ich jeden Text zum Testen in dieses Label einfügen.

3D-Texteffekt

Wenn wir es gerade im Browser sehen, sehen wir keine größeren Änderungen, nur einen normalen und aktuellen Text, damit wir ein 3D-Erscheinungsbild haben können, müssen einige Eigenschaften über CSS definiert werden. Tue es.
VERGRÖSSERN

Schritt 4

In unserem Code-Editor erstellen wir eine neue .css-Datei, die ich style.css nenne. Darin werden wir die Eigenschaften platzieren, damit unser Text den 3D-Effekt hat, den wir erzielen möchten.

Schritt 5

Wir beginnen mit der Bearbeitung unseres CSS zuerst definieren wir die Größe unseres Körpers, dafür geben wir ihm eine absolute Position mit einer Breite und Höhe von 100%.

 Körper {Position: absolut; Breite: 100 %; Höhe: 100%} 

Schritt 6

Wir schreiben in unsere .ccs die Eigenschaften für die Klasse "3d-text", die wir in Schritt 3 kommentiert haben. Wir beginnen mit der Definition der Schriftart, besonders gerne verwende ich die Schriftart "Helvetica Neue", natürlich könnt ihr das Verwenden Sie es mit der gewünschten Schriftart. In diesem Fall setze ich die Schriftgröße auf ca. 80px; fett oder fett gedruckt … Und diesmal lasse ich es in weiß. Wenn wir es in unserem Browser sehen, werden wir feststellen, dass der Text verschwunden ist, weil wir ihn weiß platziert haben und der Hintergrund der Browser auch weiß ist …

 Körper {Position: absolut; Breite: 100 %; Höhe: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftdicke: fett; Farbe: #fff; } 

Wir werden im Browser sehen, dass der Text verschwindet
VERGRÖSSERN

Schritt 7

Wir haben gesehen, dass im vorherigen Schritt der Text verschwunden ist, jetzt müssen wir ihn mit einem 3D-Effekt erscheinen lassen. Dazu müssen wir unserem Text nur mit der Eigenschaft text-shadow wie folgt einen Schatten hinzufügen.

 Körper {Position: absolut; Breite: 100 %; Höhe: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftdicke: fett; Farbe: #fff; Textschatten: 0 1px 0 #ccc; } 

VERGRÖSSERN

Wir sehen, dass wir einen leichten Schattierungseffekt erzielt haben, aber es reicht nicht aus, um es 3D aussehen zu lassen. Glücklicherweise ermöglicht uns CSS, mehrere Schatten innerhalb der Eigenschaft text-shadow zu kombinieren, die durch ein Komma getrennt sind. Wir werden dies nutzen, um mehrere zu platzieren Schatten in einem anderen Abstand von unserem Text und mit unterschiedlichen Farbtönen von einem dunkleren zu einem helleren, um den Effekt zu erzielen, aber wir müssen diese Schatten auch mit RGB-Farben und Transparenzen kombinieren, um diesen Diffusionseffekt am Ende des Schattierung.
Auf diese Weise würde unser CSS-Code so aussehen.

 Körper {Position: absolut; Breite: 100 %; Höhe: 100%} .3d_text {font-family: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftdicke: fett; Farbe: #fff; Text-Schatten: 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, .2), 0 5px 10px rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

Und das Ergebnis des Effekts wäre folgendes …
VERGRÖSSERN
Dies ist alles für den Moment hier ist eine .zip mit den Dateien, Fragen oder Anregungen können über die Kommentare gesendet werden, Grüße …
text_3d20150917130359.zip 694 Byte 217 DownloadsHat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben