Home/ Questions/Q 6770735
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:20:52+00:00

I need to create a sharp gradient for both the header and navigation text

  • 0

I need to create a “sharp” gradient for both the header and navigation text on a site I’m building. I’m trying to make it as pure HTML5/CSS3 as possible, and would like to stick with @font-face and not move over to Cufon. What I mean by sharp gradient is two colors, with no blending in between.

Example: http://dl.dropbox.com/u/12147973/sharp-gradient.png

I found a way to do it in Cufon, but as I said, I want to stick to @font-face. Cufon gives me too much grief in IE, and I really love how @font-face works.

I also found a way to do gradients on text with CSS3, but I can’t figure out how to do it with “sharp” gradients. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

As you can see from my example, using the PNG image trick won’t work, because it’s not on a solid background. If all else fails, I’ll just use a smooth gradient, but I have trust in the good people of StackOverflow.

Gradient I’m currently working with: 

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))

NOTE: I don’t mind if it’s only a one-browser solution. If that’s all their is, then at least it’s better than nothing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe you’ll need to use color stops. In this situation, you’ll want to colors in your gradient to stop at the exact spot.

    Looking at the demo you have on Nettuts, I took the code and modified it to create a two-tone sharp gradient using this code:

        -webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));

    Replace “-webkit-mask-image” piece from the demo with what I have above and it should be what you’re looking for. Adjust the RGB values for your preferred colors. Note though in the demo there’s some additional things in the CSS that might produce unexpected results, e.x. the color property in the “h1 a” selector and the color & text-shadow property in the “h1:after” selector. You may want to remove those to get a better idea of how the effect looks like in its purest form.

    Also, please note that the above code will only work for webkit based browsers (e.g. Chrome & Safari). You’ll need to implement the appropriate browser prefix properties for other browsers (e.g. -moz-), but before you do that make sure the browser supports the “mask-image” and “gradient” property.

    Cheers! 🙂

    • 0