Colorful webpage!

1

Hi guys!
I’m in middle of creating a colorful webpage and I know the code’s messy but before I continue, I need to figure out away to make each letter in the text a different color without using 100reds of span elements and selectors because I run out of names.
Ex:

<p> <span class="red">H</span><span class="blue">I</span></p>

Here is a link to my mess:
My Hand is Killing :pensive:!
Thanks :smile:!

2

Do you know how to use javascript? Thats going to be the easiest way

3 Likes
3

JS would be best.
There’s another solution that at least leans up your HTML:

HTML

<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>

CSS

span:nth-child(1) {
  color: red;
}
span:nth-child(2) {
  color: purple;
}
span:nth-child(3) {
  color: blue;
}
span:nth-child(4) {
  color: yellow;
}
span:nth-child(5) {
  color: green;
}

as in

3 Likes
4

Not best practice, but nothing against some hacking from time to time.

1 Like
5

Ok thanks! I don’t know it so well, I’m gonna check that out!

6

Thank you for your reply!

7

You can also “cheat” a little and use a gradient. But the end result is different from giving each letter its own color.

1 Like
8

Oh wow :astonished:!
I didn’t think of that. Its actually really pretty in its own way!
Thank you!

9

No problem. It is definitely easier than coloring each letter.

If you add enough color stops with duplicated colors and give percentages to each letter as needed it might look like what you want. But that would be a lot more work as well and it would have to be done for each block of text. So it wouldn’t be any easier, likely the opposite.

1 Like
10

Got that!
How did you know how much percent to use for each letter? :thinking:

11

I didn’t. That is why I said it would be more work. You have to manually (visually) figure it out.

12

Three other options:

First: If you go to the settings, under “HTML preprocessor”, you can use a templating language for the HTML which will let you use loops. With that you can generate the HTML in a loop rather than either writing it manually or using JS. This doesn’t do anything different to what you’re doing now, but it’s a lot less markup to write (you could also use Sass as the CSS preprocessor to loop over classes).

Second: You won’t have control over individual colours, but you can use a mask + a gradient background on the text to give a very similar effect (this will only really work visually if you only have one line of text).

Third: more involved but much easier to use once you’ve done it:l – If you were ok with each letter being the same colour (eg all "A"s one colour, "B"s another colour and so on), then you could use birdfont to edit a font with different colours for each letter. Then you can just use that font, it’ll already be coloured so you wouldn’t have to wrap anything in the HTML or apply any CSS for the colours.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.