Css switch shadow to the back of text - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-shadow

Description

Css switch shadow to the back of text

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
h1.CV:before {<!--from   w w  w  .  j a  v  a2 s  .c o  m-->
   background:none;
   content:attr(data-text);
   position:absolute;
   top:0;
   z-index:-2;
}

h1.CV {
   text-align:center;
   font-size:11em;
   background-image:-webkit-linear-gradient(red, orange, yellow);
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   position:absolute;
   z-index:0;
   top:21px;
}

h1.CV2:before {
   background:none;
   content:attr(data-text);
   position:absolute;
   text-shadow:6px 6px 3px Chartreuse;
   top:0;
   z-index:-2;
}

h1.CV2 {
   text-align:center;
   font-size:11em;
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
   position:absolute;
   z-index:0;
   top:21px;
}
</style> 
 </head> 
 <body> 
  <h1 class="CV2" data-text="CV">Lo</h1> 
  <h1 class="CV" data-text="CV">Lo</h1>  
 </body>
</html>

Related Tutorials