هل هناك أي طريقة CSS نظيفة لجعل كل حرف في كلمة واحدة بلون مختلف؟

Question

وأنا بحاجة إلى وسيلة للسماح كل حرف من كلمة لتدوير من خلال 3 ألوان مختلفة. أعرف بعض الطرق ليست نظيفة حتى أتمكن من القيام بذلك مع asp.NET، ولكن أنا أتساءل عما اذا كان يمكن أن يكون هناك حل نظافة CSS / جافا سكريبت أن أكثر محرك بحث ودية.

والمصمم هو بما في ذلك ملف مثل هذا لكل صفحة. فما استقاموا لكم فاستقيموا بدلا يكن لديك لتوليد صورة لكل صفحة يدويا كما أن يجعل من الصعب على محرري الموقع غير التقنية لإضافة صفحات وتغيير أسماء الصفحات.

Answer 1

وهنا بعض جافا سكريبت.

<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>

Answer 2

في جانب الخادم يمكنك القيام بذلك بسهولة بما فيه الكفاية دون محركات البحث مزعج AFAIK.

// 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، والكتابة من جانب العميل جافا سكريبت لجلب الرسالة من أصل P معين أو DIV أو أيا كان على أساس المعرف الخاص به، تقسيمه، إعادة رمز ذلك على النحو الوارد أعلاه، واستبدال P أو DIV ل "HTML داخلي" السمة.

Answer 3

وهناك بالتأكيد لا يوجد حل فقط باستخدام CSS، ومحددات CSS تعطيك لا تستطيع الوصول إلى رسائل فردية (وبصرف النظر عن :first-letter).

Answer 4

<اقتباس فقرة>   

وأنا أفضل أن يكن لديك لتوليد صورة يدويا لكل صفحة

وثم توليد الصورة تلقائيا.

وأنت لم تحدد التكنولوجيا التي من جانب الخادم الذي تستخدمه، ولكن أي واحد جيد وسوف تسمح لك لمعالجة الصور (أو على الأقل استدعاء أداة الصورة الخارجية)

وحتى المستخدمين غير التقنيين يحتاج فقط أن تفعل شيئا من هذا القبيل:

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

والسيناريو redblueyellow.cfm عندئذ إما استخدام programs.png القائمة أو إنشاء صورة جديدة مع ألوان متعددة كما تريد.

وأنا يمكن أن توفر عينة CFML أو الزائفة رمز للقيام بذلك، إذا كنت ترغب؟