Burst Title

During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. They looked like… well they looked like this:

Turns out you can do it rather semantically. Just a header tag with an anchor link inside. Admittedly, it would be cool to do it with just the header tag but I wasn’t able to figure out a way to get the layers all right with the text on top without the extra element.

<h1><a href="#0">CSS-Tricks</a></h1>

h1 { 
  text-align: center;
  color: white;
  text-transform: uppercase;
  padding: 1px;
  font-family: 'Raleway', cursive;
  font-weight: 100;
  position: relative;
  background: linear-gradient(to right, black, #eee, black);
}
h1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50px;
  width: 600px;
  margin-left: -300px;
  margin-top: -220px;
  height: 600px;
  background: radial-gradient(50% 50%, ellipse closest-side, #444, black);
  z-index: -1;
}
h1 a {
  background: black;
  display: block;
  padding: 20px;
  text-decoration: none;
  letter-spacing: 30px;
  color: white;
}

I listed out all the vendor prefixes here because using them is required in “real” usage and I worry about people copying and pasting pseudo code. But if you want to play around with this and don’t want to deal with all that, the Dabblet demo doesn’t need them as it uses Prefix Free.

I also added some animations to the demo just for fun.