Html css 3d text create project in english
In this chapter, we will know how to display 3d text in web page with the help of html, css.
Example 1.1
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin: 0; padding: 0; } body { background-color:lightgray; } .text { font-family: verdana; position: absolute; top:50%; right:50%; transform:translate(50%,-50%); font-size:15em; color:#f5f5f5; text-shadow:1px 10px 1px gray, 1px 18px 6px rgba(255,0,0,0.8), 1px 22px 10px rgba(255,0,0,0.8); } </style> </head> <body> <span class="text"> AJIT</span> </body> </html> |
Output
Example 1.2
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> html { height: 100%; } body { background-color:gray; height: 100%; } h1 { font-size:8em; top: 50%; left: 50%; margin: 0; transform: translate (-50%, -50%); position: absolute; white-space: nowrap; color: white; text-shadow: -1px -1px 0 white, 5px 5px 0 red; </style> </head> <body> <div class="background"> </div> <h1 data-heading= "AMCODESTAR">AMCODESTAR </h1> </body> </html> |
Output
