Grow your CSS skills. Land your dream job.

Burst Title

Published by Chris Coyier

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:


View Demo   Download Files

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="#">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: -webkit-linear-gradient(left, black, #eee, black);
  background: -moz-linear-gradient(left, black, #eee, black);
  background: -ms-linear-gradient(left, black, #eee, black);
  background: -o-linear-gradient(left, black, #eee, black);
}
h1:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -50px;
  width: 600px;
  margin-left: -300px;
  margin-top: -220px;
  height: 600px;
  background: -webkit-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -moz-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -ms-radial-gradient(50% 50%, ellipse closest-side, #444, black);
  background: -o-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.

View Demo   Download Files

Comments

  1. Nice work Chris!

  2. Permalink to comment#

    Wow this is awesome! I was just about to start doing something similar to this on a project I’m doing, much appreciated. Will definately be playing around with it.

  3. sunpietro
    Permalink to comment#

    unfortunately, not very good looking in IE.

    • nathan
      Permalink to comment#

      agreed. running IE9 and it looks… awkward

    • Shawn
      Permalink to comment#

      Nathan, everything looks weird in IE(besides font-smoothing…perfection)

  4. Permalink to comment#

    Your Facebook post which is meant to link to this page is broken (404)

    ALSO, your 404 page still has rubbish in the title tag, back from when your site got hacked. You haven’t noticed it Chris?

  5. Wow.. haha.. great experiment! :D

  6. Nice work Chris, without knowing i would have guess it was an image.

  7. norman
    Permalink to comment#

    Great stuff Chris, and those that simplified it a bit. Thanks!

  8. snillor
    Permalink to comment#

    A sharp effect., depending on your browser – looks very nice in some browsers, so-so in others.

    Speaking of browsers, I’m wondering why all of a sudden folks are linking to code on dabblet when – as noted above – it doesn’t open in IE9. And I can’t get it to open in Safari 5.0.2. I’d think it would be better to put examples somewhere where more folks could actually see them.

  9. Permalink to comment#

    No offense guys, but why do bother posting about IE?!!!! Give me a break! Ridiculous.

    • snillor
      Permalink to comment#

      Why bother posting about IE?

      Because no matter how illogical it is to us – no matter how well we understand IE’s failings, no matter how much we hate IE – it’s a fact that a substantial number of our clients and their website visitors continue to use some version of IE.

      I just got a new client who uses IE9 (I always ask what browser they use – I’d a fool not to), so I’ll have to make sure her site functions OK and looks good to her when viewed with IE9. Mind you, I’ll still design with more capable and consistent browsers in mind, using some of the good stuff that IE9 doesn’t get by default but maybe can be forced to understand.

      I certainly can’t ignore IE when the client uses it and a lot of her visitors will too. Telling the client something like “I know it looks funny to you, but trust me – it looks better in other browsers.” probably won’t cut it.

    • Benjamin Knight
      Permalink to comment#

      The point is that Chris’s blog is for discussing cool things you can do with modern CSS, HTML, and JavaScript.

      If you really want to use his methods in production code then the burden is on you to find a solution for for browsers that lack support, not him.

  10. Permalink to comment#

    Great stuff, love the animation in it!

  11. Permalink to comment#

    simple trick but the result is very amazing.

  12. Haha, very intuitive execution.

  13. Nice and useful tutorial.

  14. Permalink to comment#

    Another awesome looking tutorial.

    I love the animation when it loads!

  15. Chris,
    Its awesome 1, I have created the simmillar logo of my company Brass Extrusion Rods.
    But unfortunately with photoshop,
    A suggession: – Try the box shadow for H1 with x and y as 0 (similar to glow) would look awesome in 3d

  16. Anthony
    Permalink to comment#

    @snillor I’m not talking about ignoring IE in a normal client project. You obviously wouldn’t try to do something like this in IE though. I just meant, that we all know that anything remotely “new” or “web standard” won’t likely work on IE. No reason to post it. That’s what I meant.

  17. Permalink to comment#

    Others may need it and other may not, but still a good CSS info and demo..

  18. Mike
    Permalink to comment#

    IE? pfffft.

    But hey, it is one of THE most used and developed-for browsers. Anyone wishing to beta test an app, plug-in, etc. would want to share their feedback/caveats to other developers of a feature IE may or may not support. Analysis 101.

  19. Permalink to comment#

    Well this was really an interesting article as it includes some useful information. I really liked the selection of themes that you have chosen for your blog. The things you have provided in this tutorial are much impressive. Keep sharing such more fascinating blogs.

  20. Permalink to comment#

    Great effect you would have thought it was an image. Internet Explorer issue is a shame but everything struggles in IE.

  21. Permalink to comment#

    Ghaaaa, Master Chris. pls help med ,make this right on the header of my blog reel.. please, or anyone! it would be great! thank you.

  22. Chris
    Permalink to comment#

    Very cool! Thank you! However, I don’t understand why the :before element’s left property is 50%. Wouldn’t that put its left edge halfway across the h1 (instead of its center halfway across)? It clearly works; I checked out the demo and even ran it through FireBug. I just don’t understand why it works.

    Thanks again!

    • Chris
      Permalink to comment#

      nevermind, it’s the negative margin (half-the element’s width) that brings it back center. I spoke too soon.

      Thanks, though! Great stuff, as always!

  23. jt
    Permalink to comment#

    Ok, I will be a total nitwit here and ask how Chris got the top and bottom border. I am prepared to be embarrassed! Thanks.

    • @jt: The border is from the h1 gradient background. Black on both sides and #eee in the middle to provide the fade out.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".