3

ページの上部に画像がある内部 Web アプリがあり、現在、ドロップ シャドウ付きの英語のテキストが含まれています。このページのローカライズ版をさまざまな言語に提供する必要があります。私の主な選択肢は次のとおりです。

  • ローカライズされたテキストを含む、サポートされている言語ごとに異なるグラフィックを用意します。
  • CSS を使用してローカライズされたテキストを単純な画像の上に配置し、複雑な CSS 手法を使用して最新のブラウザーでドロップ シャドウを取得します。

他のオプションはありますか？これは教育環境用です。学生が使用するブラウザを制御することはできません。

グラフィックからドロップ シャドウを削除し、テキストを HTML のヘッダーに移動しようとしましたが、どちらも魅力的ではありませんでした。人々は、それが現在のページの安っぽい模造品のように見えると言いました。それは私のプライドを傷つけました。

4

4 に答える 4

9

個人的には、このような視覚効果のための CSS テクニックの大ファンです。大きな利点は、効果の処理をクライアント側にオフロードし、帯域幅とコンテンツの作成時間を節約し (各ロケールのカスタム テキスト イメージは大きな注文です!)、ユーザーのページ ダウンロードを高速化することです。

これを回避する唯一の理由は、CSS がほとんどサポートされていない非常に古い (IE5) ブラウザーでドロップ シャドウを使用する必要がある場合です。

編集：何か考えてみました-特定のフォントまたは正確なテキスト効果が必要なこのようないくつかのケースで、PHPを使用してテキストを効果付きで画像にレンダリングし、サーバー側にキャッシュしました。そうすれば、コンテンツ作成プロセスを回避し、帯域幅とサーバー CPU 時間と引き換えに、より幅広いブラウザー サポートを得ることができます。トレードオフが許容できるかどうかはあなた次第です。

于 2008-10-08T14:26:45.503 に答える
4

要求に応じて、各言語のサーバー側で画像を生成し、影を付けます。必要に応じてキャッシュします。

Image Magickを使用できる場合は、このチュートリアルを参照して、テキスト+影を生成できます...

于 2008-10-08T14:27:38.200 に答える
1

テキスト付きの画像を維持するのは面倒です。ローカライズがなくても、私はそれを避けたいと思います。

あなたのオプションに行く前に私が試みる2つの選択肢は次のとおりです。

  • タイトルに新しいテキストが利用可能であることを検出するたびにプログラムで使用できるドロップ シャドウ イメージを生成する無料のプログラムを探しています。
  • テキストの下の背景画像として繰り返し使用できる影の画像を使用する

それらが機能しない場合は、CSS を試してみますが、実際に使用する前に、できるだけ多くのブラウザーでテストしてください。

于 2008-10-08T14:28:50.007 に答える
1

Safari はドロップ シャドウ用の独自の CSS プロパティをサポートしていますが、他のブラウザーでは機能しません。CSS3 にもドロップ シャドウがあります (実際にはボックスに 1 つだけですが、ボックスの背景が透明な場合など、テキストにも使用できる可能性があります)。

しかし、ほとんどのブラウザーはこれまで CSS2 を 100% サポートしていないことを考えると、2 つのオプションのいずれかを使用する必要があると思います。もちろん、ドロップ シャドウを取得するためのそれほど複雑ではない CSS トリックがあります。

みんなのドロップシャドウ

ただし、ぼやけていないため、実際の影ほど美しくはありません。さらに、これらを機能させるには、HTML にテキストを 2 回含める必要があります。

于 2008-10-08T14:31:50.187 に答える