- Grundkenntnisse in HTML und CSS
- Ein Code-Editor
- Unser Browser
Schritt 1
Wir werden einen Ordner in unserer lokalen Site erstellen, um die Dateien zu speichern, die wir benötigen. Ich werde ihn “text_3d” nennen und einen weiteren CSS-Aufruf durchführen
Schritt 2
Wir gehen zum Code-Editor und erstellen eine neue Datei index.html, die wir im Stammverzeichnis des Ordners “tex_3d” speichern, den wir im vorherigen Schritt erstellt haben. In diesem werden wir unsere grundlegende HTML-Struktur schreiben und den Verweis auf eine CSS-Datei mit dem Namen “style” hinzufügen. ccs “, die wir später erstellen werden.
HTML-Code
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> </ title> <meta name = "description" content = ""> <meta name = "viewport" content = "width = device-width"> <link rel = "stylesheet" href = "css / style.css"> </ head> <body> </ body> </ html>
Schritt 3
Wir fügen eine Zeile in den Body ein, in der wir ein <p> -Tag platzieren, dem wir die Klasse “3d-text” zuweisen, die wir dann in der .css-Datei erstellen. Fügen Sie den zu testenden Text in dieses Tag ein.
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> </ title> <meta name = "description" content = ""> <meta name = "viewport" content = "width = device-width"> <link rel = "stylesheet" href = "css / style.css"> </ head> <body> <p class = "texto_3d"> Texteffekt in 3D </ p> </ body> </ html>
Wenn wir es jetzt im Browser sehen, werden wir keine größeren Änderungen sehen, nur einen normalen Text, so dass wir ein Erscheinungsbild in 3D haben können. Es ist notwendig, einige Eigenschaften durch CSS zu definieren. Lass uns dorthin gehen.
Schritt 4
In unserem Code-Editor erstellen wir eine neue CSS-Datei mit dem Namen style.css. In dieser Datei platzieren wir die Eigenschaften so, dass unser Text den 3D-Effekt hat, den wir erzielen möchten.
Schritt 5
Wir werden mit der Bearbeitung unseres CSS beginnen und zuerst die Größe unseres Körpers definieren. Dazu geben wir eine absolute Position mit einer Breite und Höhe von 100% an.
Körper { Position: absolut; Breite: 100%; Höhe: 100% }
Schritt 6
Wir werden in unserer .ccs die Eigenschaften für die Klasse “3d-text” schreiben, die wir in Schritt 3 erwähnt haben. Wir werden mit der Definition der Schriftart beginnen, besonders ich verwende gerne die Schriftart “Helvetica Neue”, natürlich können Sie sie mit der verwenden Art des gewünschten Briefes. In diesem Fall stelle ich die Schriftgröße auf ca. 80px ein. Typ fett oder fett … Und für diese Gelegenheit lasse ich es weiß. Wenn wir es in unserem Browser sehen, werden wir feststellen, dass der Text verschwunden ist, weil wir ihn in Weiß platziert haben und der Hintergrund des Browsers ebenfalls weiß ist …
Körper { Position: absolut; Breite: 100%; Höhe: 100% } .texto_3d { Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftgröße: fett; Farbe: #fff; }
Wir werden im Browser sehen, dass der Text verschwindet
Schritt 7
Wir haben gesehen, dass der Text im vorherigen Schritt verschwunden ist. Jetzt müssen wir ihn mit 3D-Effekt anzeigen. 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% } .texto_3d { Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftgröße: fett; Farbe: #fff; Textschatten: 0 1px 0 #ccc; }
Wir sehen, dass wir einen leichten Schattierungseffekt erzielt haben, aber es reicht nicht aus, ein 3D-Erscheinungsbild zu haben. Glücklicherweise können wir mit CSS mehrere Schatten innerhalb der durch Komma getrennten Text-Schatten-Eigenschaft kombinieren. Wir werden dies ausnutzen, um mehrere Schatten zu platzieren In unterschiedlichen Abständen von unserem Text und mit unterschiedlichen Farbtönen von einem dunkleren zu einem helleren, um den Effekt zu erzielen. Wir müssen diese Farbtöne jedoch auch mit RGBA-Farben und -Transparenzen kombinieren, um den Diffusionseffekt am Ende der Schattierung zu erzielen.
Auf diese Weise würde unser CSS-Code so bleiben.
Körper { Position: absolut; Breite: 100%; Höhe: 100% } .texto_3d { Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos; Schriftgröße: 80px; Schriftgröße: fett; Farbe: #fff; 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, .2), 0 5px 10px rgba (0, 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0,15); }
Und das Ergebnis des Effekts wäre das Folgende …
Das ist alles für den Moment hier. Ich hinterlasse eine .zip-Datei mit den Dateien, allen Fragen oder Vorschlägen, die durch die Kommentare, Grüße kommen können …
108 Descargas texto_3d20150917130359.zip 694 Bytes 108 Downloads