Geek asks and answers

How can I use text gradient in CSS without affecting the background?

I would like to use a text gradient in my headers ( this type of effect is mostly). This is usually achieved using PNG alpha-transparent image over text. My problem with this solution is that in the title field, alpha transparency also affects the background. Therefore, if, for example, I wanted to use a photo as the background of my headlines, it would look awful. Is there a way around this (at least in some browsers, for starters).

+3
source share
2 answers

It is impossible to do this with CSS3 - even CSS3 image values ​​and the replaced content module , although there is a lot of material related to gradients in it , allows you to use them where you could use the image, and not as a color.

However, SVG allows you to do this , although using this in HTML is a bit of work. First create an SVG document with gradient text. You will need a gradient:

<defs>
    <linearGradient id="heading_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:0.1"/>
    </linearGradient>
</defs>

And some text to apply it, pay attention to the attribute fill:

<text x="0" y="100"
    font-family="sans-serif" font-weight="bold"  fill="url(#heading_gradient)" >
    <tspan font-size="100">A Big Heading</tspan>
</text>

Then you need to include SVG in your HTML.

<h1>
    <object data="heading-fill.svg" type="image/svg+xml" height="125" width="800">
        A Big Heading
    </object>
</h1>

, SVG , , ( ). CSS, SVG :

h1 {
    font-size: 100px;
    font-family: sans-serif;
    background-image: url('daisy-grass-repeating-background.jpg');
}

, Firefox 3.6/4, Chromium Opera 11.01. , ;) , , embed object.

+5

, :

#the-h1
{
  background: url('the-h1.png') no-repeat left top;
  height: 1em;
  text-indent: 9001px;//it over 9000
  overflow: hidden;
}

, , , , .

+1

More articles:


All Articles