単語の各文字を異なる色にするためのクリーンなCSSメソッドはありますか？

StackOverflow https://stackoverflow.com/questions/155584

  •  03-07-2019
  •  | 
  •  

質問

単語の各文字を3つの異なる色で回転させる方法が必要です。私はasp.NETでこれを行うことができるあまりきれいでない方法を知っていますが、より検索エンジンに優しい、よりクリーンなCSS / JavaScriptソリューションがあるかもしれないと思います。

デザイナーは、このようなファイルをインクルードしています各ページ。技術に詳しくないサイト編集者がページを追加したりページ名を変更したりするのが難しくなるため、すべてのページの画像を手動で生成する必要はありません。

役に立ちましたか？

解決

JavaScriptを次に示します。

<script type="text/javascript">
   var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
</script>

他のヒント

サーバー側では、検索エンジンに迷惑をかけることなく、これを簡単に実行できます。

// This server-side code example is in JavaScript because that's
// what I know best.
var words = split(message, " ");
var c = 1;
for(var i = 0; i < words.length; i++) {
   print("<span class=\"color" + c + "\">" + words[i] + "</span> ");
   c = c + 1; if (c > 3) c = 1;
}

本当に単純なインラインHTMLコードが必要な場合は、クライアント側のJavascriptを作成して、特定のPまたはDIVまたはそのIDに基づいたものからメッセージを取得し、分割し、上記のように再コーディングし、PまたはDIVを置き換えます'innerHTML'属性。

CSSセレクターでは個々の文字（：first-letter を除く）にアクセスできないため、CSSだけを使用した解決策はありません。

  

ページごとに画像を手動で生成する必要はありません

次に、画像を自動的に生成します。

使用しているサーバー側テクノロジーを指定しませんが、適切なものであれば、イメージを操作できます（または、少なくとも外部イメージユーティリティを呼び出します）

したがって、技術に詳しくないユーザーは次のような操作を行うだけです。

<img src="images/redblueyellow.cfm/programs.png" alt="programs"/>

そして、redblueyellow.cfmスクリプトは、既存のprograms.pngを使用するか、必要に応じて複数の色で新しい画像を生成します。

必要に応じて、これを行うためのサンプルCFMLまたは擬似コードを提供できますか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top