Fancy headers.

This may come in handy:

Once I've told You how You could improve headers on Your website, using Google Font Effects. This was quite a neat idea, especially given that: 1) You could combine multiple effects and apply them to a single header - and 2) You could apply those effects to other elements as well (not only headers! :) ).

But now it's time for the next step ;) - another creative idea You could use, making headers even more attractive and unpredictable (!). I didn't invent the name for this concept yet - maybe You could call it "Candy Letters" or "Watercolor Letters"... let Me explain the details.

The very essence of it is simple: to have every single letter (more precisely: character) randomly colored. To tailor the script for this purpose was quite of an interesting experience because... in order to color each and every single letter You need to target it first - but there is a trick here: it seems not possible to fish them out of words which they are making up, because - as such - they are not considered standalone HTML elements. So in order to target single letters independently You may need a little trick: to wrap every single character with some well-known HTML tag (in fact I wouldn't be surprised if any fictional tag would work here - e.g. <x></x>).

If You have all characters already wrapped - next thing You need is to attribute a random CSS class to them. That's the theory. Let's have a look on practice:

1. First the easiest thing: choose colors which will make up Your palette (out of which they will be drawn out by random). In My case it's a simple set of just a few pastel-like colors:

.s1 { color: white; }
.s2 { color: #fde4cc; }
.s3 { color: #dad7fd; }
.s4 { color: #e9fef0; }
.s5 { color: #fed8f4; }

2. Add a new function to the file in which You gather all jQuery instructions for Your site. Make sure that it will be initiated after the whole website is loaded: use document.ready. The opening and closing part of Our code snippet will be then:

$(document).ready(function(){
...here You paste the actual code...
});

3. Which colors should be used? To be more precise: which CSS classes (of ones defined before):

var classes = ["s1", "s2", "s3", "s4", "s5"];

4. Target particular headers You want to improve by Fancy Pastel Effect - and wrap all its characters with some HTML tag (a tag per a single character - I used <b></b> tags, since titles are usually bold anyway - and You don't need to introduce any additional function):

$('.post-body h3').html(function (i, html) {
return html.replace(/(.)/g, '<b>$1</b>');
});

5. Attribute a random class (= color) to each character targeted above:

$(".post-body h3 b").each(function(){
$(this).addClass(classes[~~(Math.random()*classes.length)]);
});

That's all. The whole code would then look like:

/* Fancy Headers - start */

$(document).ready(function(){

var classes = ["s1", "s2", "s3", "s4", "s5"];

$('.post-body h3').html(function (i, html) {
return html.replace(/(.)/g, '<b>$1</b>');
});

$(".post-body h3 b").each(function(){
$(this).addClass(classes[~~(Math.random()*classes.length)]);
});

});

/* Fancy Headers - end */

In step 4 I use a regular expression which targets every single character: /(.)/g.

As a result You should see a header of which various letters have various colors. Moreover, that combination is always fresh - because it's rendered from the beginning and in a random way every time You load or refresh the website.