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.
Nice work Chris!
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.
unfortunately, not very good looking in IE.
agreed. running IE9 and it looks… awkward
Nathan, everything looks weird in IE(besides font-smoothing…perfection)
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?
Wow.. haha.. great experiment! :D
Nice work Chris, without knowing i would have guess it was an image.
Nice one!
I played around with and I modified it to work without the
a
tag.Actually aligning the gradient border is fairly easy, just set
top, right, bottom & left
al to-1px
. Other than that I added an extra pixel to the body padding to make it align exactly with your example.Here is a Dabblet:
http://dabblet.com/gist/1647579
Although thinking about it, adding a 1px margin to the h1 would have been a bit tidier than messing with the body margin.
Rats, you beat me! Here’s another way using a background gradient background and background-size, and another pseudo-element: http://dabblet.com/gist/1647798
Neither of these will even load in IE9
Dabblet doesn’t support IE anyway, see here: http://dabblet.com/help/
Shouldn’t this also be possible using
border-image
and a gradient?Why does setting
top
,right
,bottom
&left
to-1px
work? How does it work? Why did Chris need the anchor element in the first place?Great stuff Chris, and those that simplified it a bit. Thanks!
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.
No offense guys, but why do bother posting about IE?!!!! Give me a break! Ridiculous.
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.
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.
Great stuff, love the animation in it!
simple trick but the result is very amazing.
Haha, very intuitive execution.
Nice and useful tutorial.
Another awesome looking tutorial.
I love the animation when it loads!
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
@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.
Others may need it and other may not, but still a good CSS info and demo..
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.
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.
Great effect you would have thought it was an image. Internet Explorer issue is a shame but everything struggles in IE.
animation: comein 1.5s 1 ease-in-out forwards;
has to be one of the most inappropriate pieces of code I’ve ever seen.
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.
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!
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!
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.