Text shadow as outline

In this example below you will see how to do a Text shadow as outline with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by stephaniehobson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stephaniehobson ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Text shadow as outline</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <abbr title="Cascading Style Sheets">CSS</abbr>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/stephaniehobson/text-shadow-as-outline-grQKpO */
body {
  background-color: #0f0;
}

abbr {
	position:relative;
	font-size:20vw;
	font-family: 'Lemon', cursive;
	line-height:1em;
  color: #00f;
  text-shadow:
				 0px  5px #fff, 1px  5px #fff, 2px  5px #fff, 3px  5px #fff, 4px  5px #fff,
				 5px  5px #fff, 5px  4px #fff, 5px  3px #fff, 5px  2px #fff, 5px  1px #fff,
				 5px  0px #fff, 5px -1px #fff, 5px -2px #fff, 5px -3px #fff, 5px -4px #fff, 
				 5px -5px #fff, 4px -5px #fff, 3px -5px #fff, 2px -5px #fff, 1px -5px #fff, 
				 0px -5px #fff,-1px -5px #fff,-2px -5px #fff,-3px -5px #fff,-4px -5px #fff, 
				-5px -5px #fff,-5px -4px #fff,-5px -3px #fff,-5px -2px #fff,-5px -1px #fff, 
				-5px  0px #fff,-5px  1px #fff,-5px  2px #fff,-5px  3px #fff,-5px  4px #fff, 
				-5px  5px #fff,-4px  5px #fff,-3px  5px #fff,-2px  5px #fff,-1px  5px #fff,
				
				0px  10px #000, 6px  10px #000, 7px  10px #000, 8px  10px #000, 9px  10px #000,
				 10px  10px #000, 10px  9px #000, 10px  8px #000, 10px  7px #000, 10px  6px #000,
				 10px  0px #000, 10px -6px #000, 10px -7px #000, 10px -8px #000, 10px -9px #000, 
				 10px -10px #000, 9px -10px #000, 8px -10px #000, 7px -10px #000, 6px -10px #000, 
				 0px -10px #000,-6px -10px #000,-7px -10px #000,-8px -10px #000,-9px -10px #000, 
				-10px -10px #000,-10px -9px #000,-10px -8px #000,-10px -7px #000,-10px -6px #000, 
				-10px  0px #000,-10px  6px #000,-10px  7px #000,-10px  8px #000,-10px  9px #000, 
				-10px  10px #000,-9px  10px #000,-8px  10px #000,-7px  10px #000,-6px  10px #000;

    text-decoration: none;
}

Comments