CSS Help.

[iBlueBox]

Really new to HTML and CSS and all this basically,I have a header on my website, but I want each letter to be a specific colour I say such as green and blue, how would I do this on CSS?

[Calum0812]

You might want to take a look here: http://www.w3schools.com/css/default.asp

Are you talking about them alternating like this:

Merry Christmas

or like the words like this:

Merry Christmas

I know you could just have 2 classes and then have each letter in it's own class if it is the first one or each word if the second but that might be a bit messy, probably a better way to do it.

[iBlueBox]

You might want to take a look here: http://www.w3schools.com/css/default.asp

Are you talking about them alternating like this:

Merry Christmas

or like the words like this:

Merry Christmas

I know you could just have 2 classes and then have each letter in it's own class if it is the first one or each word if the second but that might be a bit messy, probably a better way to do it.

Like the first one, :)

[Calum0812]

Like the first one, :)
If I was doing it I'd setup 2 css classes then have them alternating with the classes so M would be in class_red, E in class_green etc but I'm SURE there HAS TO BE a better way to do it.

[lRhyss]

<span class="red">Letter</span> <span class="green">Letter</span>

The use CSS to style the classes :)

or...


<span style="color: Red">Letter</span> <span style="color: Green">Letter</span>

The second method requires no css, but it's a more tacky way in my opinion.

[eLv]

Or you can do something like this. http://jsfiddle.net/sJTTG/


<div class="text">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</div>


.text span {
color: blue;
}
.text span:nth-child(odd) {
color: red;
}

[Calum0812]

How does Habbox do it for the VIP colours and such? xxMATTGxx; Skynus; Recursion;

[-Nick]

Yeh i like the habbox codes but i dunno what they are :/

[eLv]

They're probably using javascript.


function alternate(colorpair) {
if(colorpair.indexOf('|') == -1) return;
var el = document.getElementById('alternator');
colorpair = colorpair.split('|');
var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
replace(/<[^>]*>/g,''). /*strip existing html tags */
split(''),
output = '';
for (var w = 0, l = letters.length; w < l; w++) {
output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
}
el.innerHTML = output;
}

http://jsfiddle.net/xpZqs/
http://stackoverflow.com/questions/17325005/how-do-i-alternate-letter-colors-on-a-webpage-using-javascript

This is very cool too: http://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/

[xxMATTGxx]

How does Habbox do it for the VIP colours and such? xxMATTGxx; Skynus; Recursion;

That would be telling :P

[-Nick]

That would be telling :P
Well please will you tell us matt! With a cherry on top!

[Demi]

Also, codeacademy.com is fantastic.

[Recursion]

Habbox uses JS for our VIP colours.

[Blinger]

Take a squizz at their source code (http://www.habboxforum.com/clientscript/custom_donator_names.js) and you'll see how Habbox does it.


//redandgreenfunction alternatingColours(selector, rainbowcolours)
{
var currentcolor = 0;
var amountinarray = rainbowcolours.length;
$(selector).each(function(){
var letters = $(this).html().split('');
$(this).html('');
for(var i in letters)
{
if(letters[i] != ' ')
{
if(letters[i].toString().search('unction') == -1)
$(this).append('<span style="font-weight: bold; text-decoration: none; color: #' + rainbowcolours[currentcolor] + ';">' + letters[i] + '</span>');

currentcolor++;
if(currentcolor == amountinarray) currentcolor = 0;
}else{
$(this).append(' ');
}
}
});
}

and to get their colours


$(document).ready(function(){
alternatingColours('.redandgreen',Array('CB150B',' 3C8D0D'));//redandgreen});

and then they set the class of the span they want to change colours to that name (redandgreen)