Metal Text Effect using CSS:- this is not a CSS animation but it’s an awesome CSS effect that teaches you about CSS.
Metal Text Effect using CSS
MetalText.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title></title> </head> <body> <h3>Metal Text Effect</h3> <h1> <span>CodeSnail</span> <span>CodeSnail</span> </h1> </body> </html>
Style.css
body{ margin: 0; padding: 0; background:url(bg.jpg); background-size: cover; } h3{ color:white; text-align: center; font-size: 4em; margin-top: 10%; font-family: tahoma; color: #929495; } h1>span{ /*color:white;*/ top:35%; position: absolute; transition: translateY(-50%); margin: 0; padding: 0; width:100%; text-align: center; font-family: sans-serif; font-style: italic; font-size:4em; text-transform: uppercase; letter-spacing: 5px; background:linear-gradient(#262626,#eaeaea,#262626); -webkit-background-clip: text; color:transparent; } h1>span:nth-child(1) { z-index: 2; } h1>span:nth-child(2) { z-index: 1; text-shadow: 1px 1px 0 #262626, 2px 2px 0 #262626, 3px 3px 0 #262626, 4px 4px 0 #262626, 5px 5px 0 #262626, 1px 1px 0 #262626, 6px 20px 20px rgba(0,0,0,1), -1px -1px 0 #fff; }
Output

So this the code of Metal Text Effect using just CSS. For Source code and Material click on Download Button and for video tutorial click here: https://bit.ly/2HZRMWp I also learn from this channel. Download the code here:Download You may also like: