3D Text CSS
Example # 1
In this example, first, we have to create the HTML file before creating the CSS file. We will perform examples in the visual code studio. You have to create a new file with the filename and use the “.html” file extension for the HTML file. Then, write the following code for rendering “Hello World” on the browser.
First, we have to mention the document type, which is “HTML” here. Remember one thing any tag we have to open must be closed with a closing tag. As the closing tag of “<html>” will be “</html>.” Then add the “<head>” tag, and inside this “<head>” tag, we have the new tag, which is the “meta” tag; we set the character set as “charset,” which is “UTF-8”. It will allow using of more characters in a document.
Then open a “<title>” tag and add a title which is “Document” here and then close this “<title>” tag by using “</title>.” After that, we have to give the link to the “CSS” file. For this, we use the “link” tag and here the “rel” attribute for defining the relationship between the linked page and the current page, which is mentioned as a “stylesheet” here.
Then, “href” is used, and we give the name of our “CSS” file, which we want to link with this “HTML” file. The name of our “CSS” file is “style.css” close the head tag “</head>” here. And open a new body tag “<body>.” In this body, we have “span class,” which is equal to “text,” and it accepts the text, which is written as “Hello World.” Also, close this tag as “</span>. Then close all the remaining tags. The remaining tag we didn’t close is the body tag, and at last, we close the <html> tag with the help of “</body> and </html> tags, respectively. After this, you have to just save this file. And move to the “style.css” file for styling and giving a 3D effect to this text.
Now, you have to create another file of the name which you are given in the “href,” and we give the “style.css” filename for linking. So, we created our “CSS” file with this name. In this “style.css” file, we will do some styling on the text.
We are going to add style. Starting with the body, we give the background color as “dimgrey.” The next thing we have done is to style the text, and the position of the text is “absolute” here which will position the text where we want to place it. Now, we give the “top” and “right” margins as “20%” and “30%,” respectively. We use the “transform: translate (50% – 50%),” and by using this, we can rotate, skew or translate our text.
Let’s move ahead and transform our text to the “uppercase.” We are going to set the font family to “Verdana.” Then, increase the font size to “6em” and the “font-weight” to “500”. The “font-weight” sets the thickness and thinness of the font. We set the “color” of the font as “brown.” We will be adding multiple layers of text shadow here. The first value is used for the horizontal offset that we are going to set as “1px,” which means 1 pixel, and the second value is for the vertical offset, which is again “1px, and the third is for “blur,” which is also “1px” and the color we are going to choose is “#919191” which is a shade of grey again.
Now, we will add another layer in which we use a horizontal offset as “1px” but the vertical as “2px”. Same as above, we will change the vertical offset in every line, but the horizontal and blur offset will be the same as shown in the image. So, the text-shadow will take shape. Then we have a final thing to do, we have to add a few more text-shadow layers, but this time, we are going to use “rgba” color values in which “r” is for “red,” “g” is for “green,” “b” is for “blue” and “a” is for “alpha” value. We set the horizontal offset as “1px”, the vertical offset as “18px”, the “blur” offset as “6px,” and the “rgba” is set as “(16, 16, 16, 0.2)” where “16” is for red, next “16” is for green, other last “16” is for blue and the value of the alpha channel is set as “0.4”. In the next lines, we change the vertical offsets and the blur areas in every line. The last thing we do is to change the alpha channel as well.
In visual studio code, we run this code on the browser, so for this, go to the “extension” or press “Ctrl+Shift+X” and search “open in browser” and install it.
After installing this, you have to right-click on the HTML file and click on “Open in Default Browser” or press “ALT + B” to open this code in the browser. Then, the following output is rendered on the screen.
Example # 2
In this example, we use the same HTML file, but we are going to use another style sheet here. We will give the name of another “CSS” file with the same “HTML” code. The name of the second “CSS” file is “stylesheet1.css,” as shown below.
In the CSS file, we change the code a little bit and change the 3D effect of the text which is given in our HTML file. Let’s try this code.
Here, we set the background color “blue-violet.” And the “position” of the text is absolute as in the above example, but here, we set the top values as “15px” and “left” as “25px”. In transform, we set “skew(-63dg)” and “scale (1,.5)”. The “skew” will skew the elements to “-63dg” horizontally. The “scale” function will resize the elements in horizontal and vertical directions. Both are built-in functions. Then we have a text transformation which is “transform: inherits,” which displays the text the same as it is given in the HTML file. We use the “font-family” as “Times New Roman,” the “font-size” is “7em,” and the weight “font-weight” is “500”.
We set the “color” of the font “white” here. Then, we are going to apply the “text-shadow” property. In this, we set the horizontal offset as “-1px”, vertical offset as “-1px”, blur as “1px,” and select color “#808080,” which is the code of the grey color. In the next lines, we will change all horizontal and vertical offsets, but the blur offset and color will be the same. We will add more text-shadow layers, but here, we use “rgba” values. In this (0, 0, 128, 0.75), we set “0” for “red,” “0” for “green,” “128” for “blue,” and “0.75” for “alpha.” The “z-index” is here for controlling the vertical order of the element that overlaps. The output is here.
We have written this guide for you so that you can understand the working of 3D text in visual studio code. We have performed these examples, which are given in this guide in the visual code studio. We discussed how we create HTML and CSS files separately and then linked both files to use the CSS style file in our HTML file. This guide will help you understand the use of “HTML” and “CSS.”