Metal Text Effect using CSS:- this is not a CSS animation but it's awesome CSS effect that teaches you about CSS.
Metal Text Effect using CSS
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:
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:
0 Comments