Choose from our various pricing plans. There is a package for everyone!


CSS Animated Rainbow Usernames

View previous topic View next topic Go down

Tutorial CSS Animated Rainbow Usernames

Post by Mati™ on Sun Jan 19, 2014 11:41 am

This tutorial will show you how to add animation rainbow in the username of a member. CSS3 animation is not supported by all browsers.

Insert the details of a member into the CSS code:

Replace the "X" in your code with the ID of a member. This ID can be found on the profile in the address bar after "/u".

Code:
       a[href="/ux"] strong {
        animation: rainbow_name 3s linear 0s infinite alternate;
        /* Firefox: */
        -moz-animation: rainbow_name 3s linear 0s infinite alternate;
        /* Safari and Chrome: */
        -webkit-animation: rainbow_name 3s linear 0s infinite alternate;
        /* Opera: */
        -o-animation: rainbow_name 3s linear 0s infinite alternate;
        }
        @keyframes rainbow_name
        {
        0%  {color:red;}
        25%  {color:yellow;}
        50%  {color:blue;}
        75%  {color:green;}
        100% {color:red;}
        }
        @-moz-keyframes rainbow_name /* Firefox */
        {
        0%  {color:red;}
        25%  {color:yellow;}
        50%  {color:blue;}
        75%  {color:green;}
        100% {color:red;}
        }
        @-webkit-keyframes rainbow_name /* Safari and Chrome */
        {
        0%  {color:red;}
        25%  {color:yellow;}
        50%  {color:blue;}
        75%  {color:green;}
        100% {color:red;}
        }
        @-o-keyframes rainbow_name /* Opera */
        {
        0%  {color:red;}
        25%  {color:yellow;}
        50%  {color:blue;}
        75%  {color:green;}
        100% {color:red;}
        }

Hope you guys like this. Please don't forget to drop your comments.  Smile


Last edited by Mati™ on Sat Nov 08, 2014 5:46 pm; edited 1 time in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Dusan on Sun Jan 19, 2014 2:18 pm

Thank you for sharing this +1.
avatar
Dusan
Member
Member

Age : 22
Posts : 711
Join date : 2012-06-08
Forum Version : PunBB
Reputation : 36

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Stallmp on Sun Jan 19, 2014 3:00 pm

Great tutorial
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by vaccam on Tue Feb 25, 2014 10:56 am

Didnt work for me tho Sad
avatar
vaccam
Member
Member

Age : 23
Posts : 40
Join date : 2014-02-23
Forum Version : PunBB
Reputation : 1

View user profile http://www.revengelesspk.com/

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Stallmp on Tue Feb 25, 2014 10:58 am

Did you Replace the "X" in your code with the ID of a member /u"?
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by vaccam on Tue Feb 25, 2014 10:59 am

Yes.
avatar
vaccam
Member
Member

Age : 23
Posts : 40
Join date : 2014-02-23
Forum Version : PunBB
Reputation : 1

View user profile http://www.revengelesspk.com/

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Stallmp on Tue Feb 25, 2014 11:01 am

Please provide me your used code
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by vaccam on Tue Feb 25, 2014 11:22 am


  1.        a[href="/u1"] strong {

  2.         animation: rainbow_name 3s linear 0s infinite alternate;

  3.         /* Firefox: */

  4.         -moz-animation: rainbow_name 3s linear 0s infinite alternate;

  5.         /* Safari and Chrome: */

  6.         -webkit-animation: rainbow_name 3s linear 0s infinite alternate;

  7.         /* Opera: */

  8.         -o-animation: rainbow_name 3s linear 0s infinite alternate;

  9.         }

  10.         @keyframes rainbow_name

  11.         {

  12.         0%  {color:red;}

  13.         25%  {color:yellow;}

  14.         50%  {color:blue;}

  15.         75%  {color:green;}

  16.         100% {color:red;}

  17.         }

  18.         @-moz-keyframes rainbow_name /* Firefox */

  19.         {

  20.         0%  {color:red;}

  21.         25%  {color:yellow;}

  22.         50%  {color:blue;}

  23.         75%  {color:green;}

  24.         100% {color:red;}

  25.         }

  26.         @-webkit-keyframes rainbow_name /* Safari and Chrome */

  27.         {

  28.         0%  {color:red;}

  29.         25%  {color:yellow;}

  30.         50%  {color:blue;}

  31.         75%  {color:green;}

  32.         100% {color:red;}

  33.         }

  34.         @-o-keyframes rainbow_name /* Opera */

  35.         {

  36.         0%  {color:red;}

  37.         25%  {color:yellow;}

  38.         50%  {color:blue;}

  39.         75%  {color:green;}

  40.         100% {color:red;}

  41.         }

avatar
vaccam
Member
Member

Age : 23
Posts : 40
Join date : 2014-02-23
Forum Version : PunBB
Reputation : 1

View user profile http://www.revengelesspk.com/

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Stallmp on Tue Feb 25, 2014 11:27 am

Weird, I can provide you another rainbow code but I'm not sure I have the permission to. The thread is in the Vip section. Please ask Mati for more help


Last edited by Stallmp on Tue Feb 25, 2014 11:30 am; edited 1 time in total
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by vaccam on Tue Feb 25, 2014 11:30 am

Still not.
avatar
vaccam
Member
Member

Age : 23
Posts : 40
Join date : 2014-02-23
Forum Version : PunBB
Reputation : 1

View user profile http://www.revengelesspk.com/

Back to top Go down

Tutorial Re: CSS Animated Rainbow Usernames

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum