Different letter colors in a word [closed]

Answer 1

Yes there is, and a popular one, too
http://letteringjs.com/

How it works?

You write you HTML as usual:

Some Title

Adds a bit of JS magic:

$(document).ready(function() {
  $(".fancy_title").lettering();
});

(Note that lettering.js depends on jQuery, so you should be somewhat familiar with it. if you're not, it's a good time to begin.)

And.. Voilà! your HTML replaced with this:

  S
  o
  m
  e
  
  T
  i
  t
  l
  e

Now, you can freely use these new classes to style your letters as you like:

.fancy_title .char1 {
  color: red
}

.fancy_title .char6 {
  color: green
}

Extra tip: use the :nth-child selector

thie :nth-child selector allows you the repeat your styles for each element that match a certain role.

I made a simple code snippet to demonstrates its power:

$(document).ready(function() {
  $(".fancy_title").lettering();
});

.fancy_title span:nth-child(4n+1) {
   color : red
}

.fancy_title span:nth-child(4n+2) {
   color : blue
}

.fancy_title span:nth-child(4n+3) {
   color : gold
}

.fancy_title span:nth-child(4n+4) {
   color : green
}

  
  
  
  
  


  
  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eveniet ea esse deleniti et illum dicta, reiciendis quia sunt quasi saepe voluptates fuga aut blanditiis perspiciatis! Rem, tempore iste vel.
  
  

Read more about :nth-child here: https://css-tricks.com/how-nth-child-works/