Metal Text Effect using CSS

Admin April 02, 2019
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

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

metal text effect using css, css effect, text effect using css, 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:

Tags
Reactions

Post a Comment

0 Comments