Gradient-filled contentEditable text in HTML

Question

Can I have such effect in HTML without using an image?

The text should be editable with this effect.

Answer 1

You may want to check the CSS Gradient Text Demo by Web Designer Wall.

• CSS Gradient Text Effect - Tutorial

It still uses png images to achieve the gradient, but it satisfies "text should be editable with same effect", if by editable you meant that it can be highlighted, copied, crawled, etc.

UPDATE:

Further to the comments below, you may want to consider using the HTML 5 contenteditable attribute. You may be able to apply the gradient technique described above over the editable text.

You would use normally use the contenteditable attribute as follows:

<section id="editable" contenteditable="true"> 
   <h1>Gradient Text Here</h1> 
</section>

If you add the <span></span> into your <h1> as described in the tutorial above, I believe it should work.

This was not tested. Let us know how it goes if you try it out!:

CSS:

h1 {
   font: bold 330%/100% "Lucida Grande";
   position: relative;
   color: #464646;
}

h1 span {
   background: url(gradient.png) repeat-x;
   position: absolute;
   display: block;
   width: 100%;
   height: 31px;
}

HTML:

<section id="editable" contenteditable="true"> 
   <h1><span></span>Gradient Text Here</h1> 
</section>

The CSS Gradient Text Effect Tutorial will tell you how to create the gradient.png.

In addition, make sure to check the html5demos.com - contenteditable demo to see the HTML 5 contenteditable attribute in action.

Answer 2

WebKit has something you might like: http://webkit.org/blog/164/background-clip-text/