texte dégradé rempli contentEditable en HTML

Question

Puis-je avoir un tel effet en HTML sans utiliser une image?

Le texte doit être modifiable avec cet effet.

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

Answer 1

Vous pouvez vérifier la CSS Gradient Text Demo par Web Designer Wall.

• CSS Gradient Text Effect - Tutorial

Il utilise des images fixes .png pour obtenir le dégradé, mais il satisfait « texte doit être modifiable avec la même effet », si par éditable que vous vouliez dire qu'il peut être mis en évidence, copié rampé , etc.

MISE à JOUR:

Suite aux commentaires ci-dessous, vous pouvez envisager d'utiliser la HTML 5contenteditable attribut. Vous pouvez peut-être appliquer la technique de dégradé décrite ci-dessus au texte modifiable.

Vous utiliseriez normalement utiliser l'attribut contenteditable comme suit:

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

Si vous ajoutez le <span></span> dans votre <h1> comme décrit dans le tutoriel ci-dessus, je crois que cela devrait fonctionner.

Cela n'a pas été testé. Faites-nous savoir comment ça se passe si vous l'essayer !:

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> 

Le CSS Gradient Text Effect Tutorial vous dira comment créer le gradient.png.

En outre, assurez-vous de vérifier le html5demos.com - contenteditable demo pour voir l'attribut HTML 5 contenteditable en action.

Answer 2

WebKit a quelque chose que vous pourriez aimer: http://webkit.org/blog/164/background-clip-text/