Text Shadow with Mask Image

In this example below you will see how to do a Text Shadow with Mask Image with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by samkap, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright samkap ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Text Shadow with Mask Image</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<script type="text/javascript" src="//use.typekit.net/dya1zqg.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="new"><h1>TABLEAUX
  </h1></div><script type="text/javascript" src="//use.typekit.net/dya1zqg.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/samkap/text-shadow-with-mask-image-aAgib */

h1 {
  text-align: center;
  font-family: "Cubano";
  letter-spacing: .08em;
  color: MediumVioletRed;
  text-shadow: .03em .03em 1px bisque, .03em -.03em 1px bisque,-.03em -.03em 1px bisque, -.03em .03em 1px bisque,-.055em .055em 1px DarkTurquoise;
  -webkit-mask-image: url(http://samkapila.com/texture.png);
  font-size: 10em;
}

body {
  background: bisque;
}

Comments