3D Text CSS
Beispiel 1
In diesem Beispiel müssen wir zunächst die HTML -Datei erstellen, bevor wir die CSS -Datei erstellen. Wir werden Beispiele im Visual Code Studio durchführen. Sie müssen eine neue Datei mit dem Dateinamen erstellen und die „verwenden“.HTML ”Dateierweiterung für die HTML -Datei. Schreiben Sie dann den folgenden Code, um „Hello World“ auf dem Browser zu rendern.
Zunächst müssen wir den Dokumenttyp erwähnen, der hier „HTML“ ist. Denken Sie daran, eine Sache, die wir uns öffnen müssen, muss mit einem Schlussetikett geschlossen werden. Wie das Schlussetikett von "" sein wird ".”Dann fügen Sie das" "" Tag hinzu, und in diesem "” -Tag haben wir das neue Tag, das das „Meta“ -Tag ist. Wir setzen den Zeichensatz als "Charset", das "UTF-8" ist. Es ermöglicht die Verwendung von mehr Zeichen in einem Dokument.
Öffnen Sie dann ein "" -Tag und fügen Sie hier einen Titel hinzu, der "Dokument" ist, und schließen Sie dann dieses "" -Tag mit Verwendung ".Danach müssen wir den Link zur "CSS" -Datei geben. Dazu verwenden wir das Tag "Link" und hier das Attribut "REL", um die Beziehung zwischen der verknüpften Seite und der aktuellen Seite zu definieren, die hier als "Stylesheet" genannt wird.
Dann wird „href“ verwendet, und wir geben den Namen unserer "CSS" -Datei, die wir mit dieser "HTML" -Datei verlinken möchten. Der Name unserer "CSS" -Datei ist "Stil".CSS ”Schließen Sie das Kopf -Tag„ “hier. Und öffnen Sie ein neues Körpermarke “."In diesem Körper haben wir" Span Class ", was dem" Text "entspricht, und es akzeptiert den Text, der als" Hallo Welt "geschrieben ist."Schließen Sie dieses Tag auch als" als ". Schließen Sie dann alle verbleibenden Tags. Das verbleibende Tag, das wir nicht geschlossen haben, ist das Body -Tag, und schließlich schließen wir das Tag mit Hilfe von „bzw. Tags. Danach müssen Sie diese Datei einfach speichern. Und wechseln Sie zum „Stil“.CSS ”-Datei zum Styling und Verleihung eines 3D -Effekts diesem Text.
Jetzt müssen Sie eine andere Datei des Namens erstellen, die Sie im „HREF“ erhalten, und wir geben den „Stil“.CSS ”Dateiname zum Verknüpfen. Also haben wir unsere "CSS" -Datei mit diesem Namen erstellt. In diesem „Stil.CSS ”-Datei, wir werden ein gewisses Stil im Text durchführen.
Wir werden Stil hinzufügen. Beginnend mit dem Körper geben wir die Hintergrundfarbe als „Dimgrey.Das nächste, was wir getan haben, ist, den Text zu stylen, und die Position des Textes ist hier „absolut“, was den Text dort positioniert, wo wir ihn platzieren möchten. Jetzt geben wir die Margen „Top“ und „Right“ als „20%“ bzw. „30%“ an. Wir verwenden die „Transformation: Translate (50% - 50%)“ und können unseren Text drehen, verzerren oder übersetzen.
Lassen Sie uns weiterentwickeln und unseren Text in den „Großbuchstaben verwandeln.Wir werden die Schriftfamilie auf „Verdana“ setzen."Erhöhen Sie dann die Schriftgröße auf" 6EM "und das" Schriftgewicht "auf" 500 ". Das „Schriftgewicht“ setzt die Dicke und Dünnheit der Schriftart. Wir setzen die „Farbe“ der Schrift als „braun.Wir werden hier mehrere Textschattenschichten hinzufügen. Der erste Wert wird für den horizontalen Offset verwendet, den wir als „1PX“ festlegen werden, was 1 Pixel bedeutet, und der zweite Wert ist für den vertikalen Offset, was erneut „1PX“ ist und der dritte für „Blur“, „Blur“, „Blur“,, für „Blur“,, für „Blur“,, für „Blur“, ist für „Blur“, der „Blur“, der „Blur“, der „Blur“, der „Blur“ ist, ist für „Blur“, der „Blur“, der dritte ist, ist für „Blur“, die „Blur“, die „Blur“, die „Blur“ ist, ist für „Blur“. Das ist auch "1PX" und die Farbe, die wir wählen werden, lautet "#919191", das ist wieder ein Graustatten.
Jetzt werden wir eine weitere Ebene hinzufügen, in der wir einen horizontalen Versatz als „1PX“ verwenden, aber die Vertikale als „2px“. Wie oben ändern wir den vertikalen Versatz in jeder Zeile, aber der horizontale und der Unschärfenversatz ist der gleiche wie im Bild gezeigt. Der Textschatten nimmt also Gestalt an. Dann haben wir eine letzte Sache zu tun, wir müssen ein paar weitere Textschattenschichten hinzufügen, aber dieses Mal werden wir "RGBA" -Farbwerte verwenden, bei denen „R“ für „rot“ ist, „G“ ist Für "Grün" ist "B" für "Blue" und "A" für den "Alpha" -Wert gilt. Wir setzen den horizontalen Offset als "1PX", den vertikalen Versatz als "18px", den "Unschärfen" als "6PX" und die "RGBA" als "(16, 16, 16, 0) eingestellt.2) “wobei„ 16 “für Rot ist, der nächste„ 16 “für Grün, andere letzte„ 16 “für Blau und der Wert des Alpha -Kanals wird als„ 0) eingestellt.4 ”. In den nächsten Zeilen ändern wir die vertikalen Offsets und die Unschärfenbereiche in jeder Linie. Das Letzte, was wir tun, ist auch den Alpha -Kanal zu ändern.
In Visual Studio Code führen wir diesen Code im Browser aus. Gehen Sie dafür zum „Erweiterung“ oder drücken Sie "Strg+Shift+X" und suchen Sie in Browser und installieren Sie ihn.
Nachdem Sie dies installiert haben, müssen Sie mit der rechten Maustaste auf die HTML-Datei klicken und auf "Im Standardbrowser öffnen" klicken, oder drücken Sie "Alt + B", um diesen Code im Browser zu öffnen. Anschließend wird die folgende Ausgabe auf dem Bildschirm wiedergegeben.
Beispiel # 2
In diesem Beispiel verwenden wir dieselbe HTML -Datei, aber wir werden hier ein anderes Stilblatt verwenden. Wir geben den Namen einer anderen "CSS" -Datei mit demselben "HTML" -Coder an. Der Name der zweiten "CSS" -Datei lautet "Stylesheet1".CSS “, wie unten gezeigt.
In der CSS -Datei ändern wir den Code ein wenig und ändern den 3D -Effekt des Textes, der in unserer HTML -Datei angegeben ist. Versuchen wir diesen Code.
Hier setzen wir die Hintergrundfarbe „Blue-Violett."Und die" Position "des Textes ist absolut wie im obigen Beispiel, aber hier setzen wir die Top -Werte als" 15px "und" links "als" 25px ". In der Transformation setzen wir "Skew (-63dg)" und "Skala (1),.5) ”. Der "Schräg" wird die Elemente horizontal auf "-63dg" verzerren. Die Funktion „Skalierung“ wird die Größe der Elemente in horizontaler und vertikaler Richtungen ändern. Beide sind integrierte Funktionen. Dann haben wir eine Texttransformation, die „Transformation: Erben“ ist, in der der Text genauso angezeigt wird, wie er in der HTML -Datei angegeben ist. Wir verwenden die "Schriftfamilie" als "Times New Roman", die "Schriftgröße" ist "7EM", und das Gewicht "Schriftgewicht" ist "500".
Wir setzen die „Farbe“ der Schriftart „Weiß“ hier. Dann werden wir die Eigenschaft "Text-Shadow" anwenden. Darin stellen wir den horizontalen Offset als "-1px", vertikaler Versatz als "-1px" fest, Blur als "1PX" und wählen Sie Farbe "#808080", der Code der grauen Farbe ist. In den nächsten Zeilen werden wir alle horizontalen und vertikalen Offsets ändern, aber der Unschärfenversatz und die Farbe werden gleich sein. Wir werden weitere Textschattenschichten hinzufügen, aber hier verwenden wir "RGBA" -Werte. In diesem (0, 0, 128, 0.75), wir setzen "0" für "rot", "0" für "Green", "128" für "Blue" und "0".75 ”für„ Alpha."Der" Z-Index "ist hier zur Kontrolle der vertikalen Reihenfolge des Elements, das sich überlappt. Die Ausgabe ist hier.
Abschluss
Wir haben diesen Leitfaden für Sie geschrieben, damit Sie die Arbeit von 3D -Text im Visual Studio -Code verstehen können. Wir haben diese Beispiele durchgeführt, die in diesem Handbuch im Visual Code Studio angegeben sind. Wir haben diskutiert, wie wir HTML- und CSS -Dateien separat erstellen, und dann beide Dateien verknüpft, um die CSS -Style -Datei in unserer HTML -Datei zu verwenden. Diese Anleitung hilft Ihnen dabei, die Verwendung von „HTML“ und „CSS“ zu verstehen.”