07-10-2017, 11:21 AM
Pages (2):
Rainbow Text/Button on mybb forum | Tutorial by Arsal
more_vert
07-10-2017, 11:37 AM
(07-10-2017, 11:21 AM)OldMeister Wrote: but how i can change the forum looking? and how to edit domain?i think you don't have any knowledge. come on facebook i'll help you personally.
https://www.facebook.com/ARSALRAJPUT
07-10-2017, 12:27 PM
(07-10-2017, 11:37 AM)arsalahmed786 Wrote: i think you don't have any knowledge. come on facebook i'll help you personally.
https://www.facebook.com/ARSALRAJPUT
i dont have facebook. you got discord?
07-10-2017, 01:18 PM
well it is not limited to mybb and any forum cms . i can even use it in plain html without any cms
![[Image: 1g-AiKxRT3mf4XYBx5a1og.png]](https://image.prntscr.com/image/1g-AiKxRT3mf4XYBx5a1og.png)
Here the html code that i use:
Here the html code that i use:
Code: (Select All)
Text
<html>
<head>
<title>Rainbow Text w/o Mybb</title>
<style>body {
background-size:2em 2em;background-position:0em 1em,1em 0,0em 1em,1em 0,0 0,0 0,0 0,0 0,0 0;background-image:linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,transparent 17%,#000 17%,#000 21%,transparent 21%,transparent 79%,#000 79%,#000 83%,transparent 83%),linear-gradient(45deg,transparent 29%,#000 29%,#000 33%,transparent 33%,transparent 67%,#000 67%,#000 71%,transparent 71%),linear-gradient(-135deg,#202020 10%,#090909 33%,transparent 33%,transparent 67%,#161616 67%,#202020 90%),linear-gradient(135deg,transparent 21%,#161616 21%,#2d2d2d 32.6%,#161616 64.5%,#202020 70.3%,#090909 79%,transparent 79%),linear-gradient(-135deg,transparent 21%,#161616 21%,#202020 40%,#202020 60%,#090909 79%,transparent 79%);
color: white;
font-weight: 700;
font-size: 29px;
margin: 4em auto;
text-align: center;
cursor: crosshair;
letter-spacing: 5;
}
/*This is coded CSS rainbow*/
.rainbow:hover {
-webkit-animation:rainbow 1s infinite;
-ms-animation:rainbow 1s infinite;
-o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
}
@-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
} </style>
</head>
<body>
Rainbow Text Here -->
<span class="rainbow"><strong><em>Sample Text</em></strong></span>
</body>
</html>
humanpuff69@FPAX:~$ Thanks To Shadow Hosting And Post4VPS for VPS 5
07-10-2017, 02:24 PM
(07-10-2017, 01:18 PM)humanpuff69 Wrote: well it is not limited to mybb and any forum cms . i can even use it in plain html without any cms
Here the html code that i use:
Code: (Select All)Text
<html>
<head>
<title>Rainbow Text w/o Mybb</title>
<style>body {
background-size:2em 2em;background-position:0em 1em,1em 0,0em 1em,1em 0,0 0,0 0,0 0,0 0,0 0;background-image:linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(45deg,#000 8%,transparent 8%,transparent 92%,#000 92%),linear-gradient(-45deg,transparent 17%,#000 17%,#000 21%,transparent 21%,transparent 79%,#000 79%,#000 83%,transparent 83%),linear-gradient(45deg,transparent 29%,#000 29%,#000 33%,transparent 33%,transparent 67%,#000 67%,#000 71%,transparent 71%),linear-gradient(-135deg,#202020 10%,#090909 33%,transparent 33%,transparent 67%,#161616 67%,#202020 90%),linear-gradient(135deg,transparent 21%,#161616 21%,#2d2d2d 32.6%,#161616 64.5%,#202020 70.3%,#090909 79%,transparent 79%),linear-gradient(-135deg,transparent 21%,#161616 21%,#202020 40%,#202020 60%,#090909 79%,transparent 79%);
color: white;
font-weight: 700;
font-size: 29px;
margin: 4em auto;
text-align: center;
cursor: crosshair;
letter-spacing: 5;
}
/*This is coded CSS rainbow*/
.rainbow:hover {
-webkit-animation:rainbow 1s infinite;
-ms-animation:rainbow 1s infinite;
-o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
}
@-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
} </style>
</head>
<body>
Rainbow Text Here -->
<span class="rainbow"><strong><em>Sample Text</em></strong></span>
</body>
</html>
Can you show me? on forum or website. i want smoother.
07-10-2017, 06:22 PM
(07-10-2017, 02:24 PM)arsalahmed786 Wrote: Can you show me? on forum or website. i want smoother.
well you can see here http://gretong.me/rainbow.html
humanpuff69@FPAX:~$ Thanks To Shadow Hosting And Post4VPS for VPS 5
07-10-2017, 09:05 PM
(07-10-2017, 06:22 PM)humanpuff69 Wrote: well you can see here http://gretong.me/rainbow.html
i've same. just from codepen and it CSS. your's HTML?
Pages (2):
person_pin_circle
Users browsing this thread: 1 Guest(s)