1

画像を使用せずに HTML でそのような効果を得ることができますか?

テキストは、この効果で編集可能でなければなりません。

編集可能にする

4

2 に答える 2

2

Web Designer WallによるCSS Gradient Text Demoを確認することをお勧めします。

引き続きpng画像を使用してグラデーションを実現しますが、編集可能でハイライト、コピー、クロールなどできることを意味する場合、「テキストは同じ効果で編集可能でなければなりません」を満たします。

アップデート：

以下のコメントに加えて、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>

CSS グラデーション テキスト効果のチュートリアルでは、gradient.png.

さらに、html5demos.com - contenteditable デモをチェックして、HTML 5contenteditable属性の動作を確認してください。

于 2010-01-21T11:44:50.640 に答える
0

WebKit には、あなたが気に入るかもしれないものがあります: http://webkit.org/blog/164/background-clip-text/

于 2010-01-21T16:06:12.017 に答える