サイトのデザインを「スクラッチ技法（文字や罫線の隙間からだけ、その下の色が見える）」にしたい。

質問

サイトのデザインを「スクラッチ技法（文字や罫線の隙間からだけ、その下の色が見える）」にしたいのですが、ご指導ください。

なお、作りたいのは、http://www.re-wish.com/sample.gifのようなものです。

背景は黒、テキストや罫線の部分(テキスト背景ではなく、文字の太さ)にだけグラデーションを表示させたいと考えています。グラデーションはページ全体で変化させたいです。

黒い紙を文字の形に穴を開け、その穴からグラデーションが見える、そんな風にしたいのですが、cssでどのようにしたらいいでしょうか？

http://www.moongift.jp/2008/01/css_gradient_text_effect/を参考にはしたのですが、どうもしたいことと少し違うように思いました。

今、制作段階のものは、Photoshop CS3のレイヤーでとらえますと、
1.模様
2.テキスト
3.背景色
という重なりで、「1.模様」で「2.テキスト」をクリッピングマスクしています。

ソフトはIllustrator、Photoshop、DreamweaverのそれぞれCS3を使用しています。よろしくお願いいたします。

最終的にはDreamweaver CS3でのサイト制作を予定しています。

何卒よろしくお願いします。

回答No.2

soramame00 · ベストアンサー

モニタに表示されるテキストをどのようにしたら「透明」にできるのか…もしそれが可能なら、私も知りたいですね。

仮に、テキストの透明化が可能だったとして、どのくらいの文字サイズで表示させる予定かわかりませんが、どう考えても「非常に読みづらい」と思いますよ。

ロゴや、見出しなどの大きな部分は画像化して、他のテキストは白文字等というのが現実だと思います。
ただし、その配色も、目に優しくないので、テキスト中心のサイトにはあまり向かないと思います。
その色遣いで目が痛くならない人だけが見られれば良い、という内容なら、趣味の問題なので、現在の技術で可能な手法の範囲でどうぞ。

回答No.1

SAYKA

現在のweb仕様ではそれはできないんじゃない？
やるとしたら「画像化」するしかないよ。

一般文字のようにテキスト編集だけで件の効果を出したいとしたら
そうだね、サーバサイドで描画した画像を送り出すくらいならできるけど
HTMLとCSSだけで実現は　まぁ無理かな。

あとは・・・FLASHかな

お礼

ご回答ありがとうございます。

やっぱりできないのでしょうか、、、。
「画像化」しかないですか、、、。
できるだけシンプルにしたいと考えていまして、テキスト中心を企画しました。