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:
