Creating a Two-Color Sharp Gradient on Text With CSS3

问题

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.

回答1:

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! :)

回答2:

Here is an example I did for buttons in an app

a.primary[type="button"],input.primary[type="button"], input.primary[type="submit"],input.primary[type="reset"]{
              background-image: linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -o-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -moz-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -webkit-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
              background-image: -ms-linear-gradient(top, #DD901F 0%, #b7781a 35%, #BA7918 50%, #b7781a 85%,#DD901F 100%); 
a.primary[type="button"] span,a.secondary[type="button"] span{padding: 0 20px;height: 20px;}

Then you can use it with inputs or a tags with a type = button

<a type="button" class="primary" href="/neeto"><span>Button!</span>

来源：https://stackoverflow.com/questions/8002429/creating-a-two-color-sharp-gradient-on-text-with-css3

标签

css

gradient

font-face