Có phương pháp CSS sạch nào để làm cho mỗi chữ cái trong một từ có màu khác không?

Question

Tôi cần một cách để cho phép mỗi chữ cái của một từ xoay qua 3 màu khác nhau. Tôi biết một số cách không sạch sẽ như vậy tôi có thể làm điều này với asp.NET, nhưng tôi tự hỏi nếu có thể có một giải pháp CSS/JavaScript sạch hơn là công cụ tìm kiếm thân thiện hơn.

Nhà thiết kế bao gồm a file like this cho mỗi trang. Tôi không muốn phải tạo hình ảnh theo cách thủ công cho mỗi trang vì điều đó khiến các trình chỉnh sửa trang web không kỹ thuật khó thêm các trang và thay đổi tên trang.

Answer 1

Đây là một số 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> 

Answer 2

Ở phía máy chủ, bạn có thể thực hiện việc này một cách dễ dàng mà không cần đến các công cụ tìm kiếm gây phiền nhiễu 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; 
} 

Nếu bạn thực sự muốn chết đơn giản mã nội tuyến HTML, viết client-side Javascript để lấy thư ra khỏi một P nhất định hoặc DIV hoặc bất cứ điều gì dựa trên ID của nó, tách nó, recode nó như trên, và thay thế thuộc tính 'innerHTML' của P hoặc DIV.

Answer 3

Chắc chắn không có giải pháp nào chỉ sử dụng CSS, vì bộ chọn CSS cho phép bạn không có quyền truy cập vào từng chữ cái (ngoài :first-letter).

Answer 4

Tôi không muốn phải tự tạo ra một hình ảnh cho mỗi trang

Sau đó, tạo ra các hình ảnh tự động.

Bạn không chỉ định mà công nghệ phía máy chủ bạn đang sử dụng, nhưng bất kỳ một tốt sẽ cho phép bạn thao tác hình ảnh (hoặc ít nhất là gọi một tiện ích hình ảnh bên ngoài)

Vì vậy, người dùng không có kỹ thuật sẽ chỉ cần thực hiện một việc như sau:

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

Và tập lệnh redblueyellow.cfm sau đó sẽ sử dụng chương trình hiện có.png hoặc tạo hình ảnh mới với nhiều màu như mong muốn.

Tôi có thể cung cấp mẫu CFML hoặc mã giả để thực hiện việc này, nếu bạn muốn?