I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.
var el = document.querySelectorAll('span[class^=impact]')[0],
col = el.className.split('-')[1];
el.style.textShadow = '2px 2px 0 #' + col;
html, body {
width: 100%;
height: 100%;
margin: 0;
background-image: url('http://i.imgur.com/UxB7TDq.jpg');
}
[class^=impact] {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: Impact, sans-serif;
font-size: 72pt;
font-weight: 800;
text-transform: uppercase;
}
<span class="impact-008080">impact</span>
See Question&Answers more detail:os