Is There Any Clean CSS Method to Make Each Letter in a Word a Different Color

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>");}

Specific letters that have each specific colors?

Assuming you are using UILabel named myLabel:

let str = "This is a string"
let colors:[UIColor] = [
    .blackColor(),     // T
    .darkGrayColor(),  // h
    .lightGrayColor(), // i
    .grayColor(),      // s

    .clearColor(),     //

    .redColor(),       // i
    .greenColor(),     // s

    .clearColor(),     //

    .blueColor(),      // a

    .clearColor(),     //

    .cyanColor(),      // S
    .yellowColor(),    // t
    .magentaColor(),   // r
    .orangeColor(),    // i
    .purpleColor(),    // n
    .brownColor(),     // g
]

let attrStr = NSMutableAttributedString()
for (chr, color) in Zip2(str, colors) {
    attrStr.appendAttributedString(
        NSAttributedString(string: String(chr), attributes: [NSForegroundColorAttributeName:color])
    )
}

myLabel.attributedText = attrStr

How to random color half of the words within h2 tag?

here is the clean html code that generated by slideshow

<div class="slides-container">

    <h2>
        <span>he secret of getting ahead is</span>
        getting started.
        <span>-Mark Twain  </span>
    </h2>

    <h2>
        <span>You are never too old</span>
        to set another goal or to dream a new dream.
        <span>-C.S.Lewis</span>
    </h2>

    <h2>
       <span>
       If you can dream it</span>, you can do it.
       <span>-Walt Disney</span>
    </h2>

</div>

this array defined colors

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];

Change the first Span color in each H2 Tags :

$('.slides-container h2 span:first-child').each(function(){
    $(this).css(
       'color',
        colors[Math.floor(Math.random() * colors.length)]);
});

JSFIDDLE V2

Style certain characters with CSS

That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

---

Related Topics