Возможно, вы захотите проверить CSS Gradient Text Demo от Web Designer Wall .
Он по-прежнему использует изображения в формате png для достижения градиента, но он удовлетворяет «текст должен редактироваться с тем же эффектом», если под редактируемым вы подразумевали, что он может быть выделен, скопирован, сканирован и т. Д.
UPDATE:
В дополнение к комментариям ниже вы можете рассмотреть возможность использования атрибута HTML 5 contenteditable. Вы можете применить метод градиента, описанный выше, к редактируемому тексту.
Обычно вы используете атрибут contenteditable следующим образом:
<section id="editable" contenteditable="true">
<h1>Gradient Text Here</h1>
</section>
Если вы добавите <span></span> в ваш <h1>, как описано в руководстве выше, я считаю, что это должно сработать.
Это не было проверено. Дайте нам знать, как это происходит, если вы попробуете это!:
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>
Учебное пособие по градиентному текстовому эффекту расскажет вам, как создать gradient.png.
Кроме того, обязательно посмотрите html5demos.com - contenteditable demo , чтобы увидеть атрибут HTML 5 contenteditable в действии.