<div id="wrapper">
  
  <p id="stars"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span></p>
  <p id="title" contenteditable="true" spellcheck="false"><span>CSS</span><span>3</span><span>D</span></p>
  <p id="slogan"><span>Popcorn</span> for your <span>text</span>.</p>
  
</div>


<div id="meta">
  <a href="http://en.wikipedia.org/wiki/File:Anaglyph_glasses.png"><img src="https://s.cdpn.io/79/3D-glasses.png" alt="3D Glasses" /> 3D red-cyan glasses</a> recommended.</p>
</div>

html {
  height: 100%;
  font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  background: #f5f5f5 url(https://s.cdpn.io/79/light-beams.jpg) no-repeat center center;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#wrapper {
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 10em;
  padding: 50px 0;
}

span { 
  text-shadow: -0.06em 0 red,  0.06em 0 cyan; /* This creates the 3D effect, pretty easy, eh? */
  letter-spacing: 0.08em; /* make sure the letters don't overlap */
}

p {
  margin: 0;
}

/* ---------------- Stars ---------------- */

#stars span {
  display: inline-block;
  transform: scale(1);
  transition: transform 2s cubic-bezier(0, 1, 0, 1);
}
#stars span:hover {
  cursor: crosshair;
  transform: scale(1.3); /* This adds a hover effect */
  transition: transform .2s cubic-bezier(0, 0.75, 0, 1);
}
#stars span:active {
  text-shadow: none; /* Click to disable the 3D effect */
}

/* Below the stars animation */
#stars span:nth-child(1), #stars span:nth-child(5) { font-size: 0.3em; animation-delay: 0.2s; }
#stars span:nth-child(2), #stars span:nth-child(4) { font-size: 0.5em; animation-delay: 0.1s; }
#stars span:nth-child(3) { font-size: 0.8em; animation-delay: 0s; }

#stars span { animation: stars-animation 3s 50 ease-in-out; }

@-webkit-keyframes stars-animation {
  0% { transform: scale(1); }
  90% { transform: scale(1); }
  95% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

#stars:hover span {
  animation: none; /* Disables the animation on hover */
}


/* ---------------- Title ---------------- */

#title {
  font-family: Helvetica, Geneva, sans-serif; /* Any font would work, but SansSerif looks better */
}
#title:focus {
  outline: none;
}
#title span {
  vertical-align: middle;
  line-height: 1.5em;
  transition: font-size 2s cubic-bezier(0, 1, 0, 1);
}
#title span:hover {
  font-size: 1.5em; /* This adds a hover effect */
  line-height: 1em;
  transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
}
#title span:active {
  font-size: 1em;
  text-shadow: none; /* Click to disable the 3D effect */
}
#title span::selection {
  background-color: red; /* This hides the selection */
}


/* ---------------- Slogan ---------------- */

#slogan { font-size: 0.25em; }
#slogan span:active { text-shadow: none; }




/* Below just some styling for the meta info */

#meta {
  color: #777;
  font-size: 1.2em;
  line-height: 1.6em;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0 1px 0;
  margin: 30px;
}
#meta strong { font-weight: bold; color: #000; }
#meta p:first-child { margin-bottom: 20px; }
#meta a { text-decoration: none; color: #7276ff; }
#meta a:hover { color: rgba(114,118,255,0.5); }
#meta img { vertical-align: text-bottom; }