Содержимое, заполненное градиентомВозможный текст в HTML

Question

Могу ли я иметь такой эффект в HTML без использования изображения?

Текст должен быть доступен для редактирования с этим эффектом.

Make me editable http://www.freeimagehosting.net/uploads/3e44cf853d.png

Answer 1

Вы можете проверить CSS Gradient Text Demo на Web Designer Wall.

• CSS Gradient Text Effect - Tutorial

Он по-прежнему использует PNG изображений для достижения градиента, но она удовлетворяет «текст должен быть редактируемым с таким же эффектом», если по редактируемым вы имели в виду, что он может быть выделен, копировать, искатель и т.д.

UPDATE:

Далее в комментариях ниже, вы можете рассмотреть вопрос об использовании HTML 5contenteditable атрибут. Возможно, вы сможете применить описанную выше методику градиента над редактируемым текстом.

Вы могли бы использовать обычно используют атрибут 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> 

CSS Gradient Text Effect Tutorial расскажет вам, как создать gradient.png.

Кроме того, не забудьте проверить html5demos.com - contenteditable demo, чтобы увидеть атрибут HTML 5 contenteditable в действии.

Answer 2

WebKit есть что-то вы можете, как: http://webkit.org/blog/164/background-clip-text/