CODEWITHSUNDEEP
cssgradient
MozazDesign
MozazDesign

Reputation: 617

CSS Gradient Text issue

I'm trying to replicate this: http://webdesignerwall.com/tutorials/css-gradient-text-effect however I can't seem to get it to work, although I've used the same code..

This is my HTML:

<h1><span></span>Sign Up</h1>

And CSS:

h1 {
font-family: arial;
font-weight: bold;
font-size: 24px;
position: relative;
color: #a2a2a2;
}

h1 span {
background: url(gradient.png) repeat-x scroll 0 0 transparent;
opacity: 1;
position: absolute;
display: block;
margin-top: 2px;
width: 100%;
height: 21px;
}

And this is what happens:

The Problem

Any help would be great! Thanks.

Upvotes: 0

Views: 470

Answers (3)

thirtydot
thirtydot

Reputation: 228152

The problem is with your "gradient image".

You're supposed to use a gradient containing only the same colour as the background, but with the opacity of the gradient starting at around 0% and ending at around 100% (your choice exactly what numbers).

I've loaded the demo image into Photoshop, and made it wider so you can see what it should look like in Photoshop:

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58521

You should make your gradient file use the same color as the background of your page as the 'paint' and keep the rest transparent

Upvotes: 1

Chris Laarman
Chris Laarman

Reputation: 1589

ehmm...your text is outside the span?

And besides that, the gradient they use is a white gradient on a white background. You are using a black gradient on a white background :) Might be the difference

Upvotes: 1

Related Questions