Rainbow usernames, the proper way.

[cronhound]

I'm sick of seeing the dodgy, nonworking tutorials floating around this forum, so I decided to write one myself. Please note, this will only work in the latest browsers, so if your clients all use IE6, this isn't the tutorial for you.

First up, insert the following CSS into your global.css file:

.rainbow{
 -webkit-animation:rainbow 3s linear infinite;
animation:rainbow 3s linear infinite;

}

@keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}
@-webkit-keyframes rainbow {
  from {
color: red;
text-shadow: 0 0 10px red;
  }
  15% {
color: orange;
text-shadow: 0 0 10px orange;
  }
  30% {
  color: yellow;
text-shadow: 0 0 10px yellow;
  }
  45% {
color: green;
text-shadow: 0 0 10px green;
  }
  60% {
color: blue;
text-shadow: 0 0 10px blue;
  }
  75% {
color: indigo;
text-shadow: 0 0 10px indigo;
  }
  90% {
color: violet;
text-shadow: 0 0 10px violet;
  }
  to {
color: red;
text-shadow: 0 0 10px red;
  }
}

Now, under the group settings of the group you want to have "rainbow text" on, insert the following username style:

<span class="rainbow">{username}</span>

For a working demo, check out this user on my forum: http://villainforums.com/member.php?acti...ile&uid=13

I'm happy to answer any questions.

[laie_techie]

Your code makes use of the -webkit prefix, so it only works on webkit-based browsers. You need to take into account -moz (Mozilla, including Firefox), -ms (Microsoft), -o (Opera), etc. You probably want to include this without any prefix for standards-compliant browsers.

CSS Tricks

Using CSS animations

[cronhound]

Your code makes use of the -webkit prefix, so it only works on webkit-based browsers. You need to take into account -moz (Mozilla, including Firefox), -ms (Microsoft), -o (Opera), etc. You probably want to include this without any prefix for standards-compliant browsers.

CSS Tricks

Using CSS animations

Mozilla and Opera, currently do not need prefixes as far as I know.