This post is by a banned member (RealPsycho) - Unhide
OP 25 April, 2023 - 09:45 PM
Reply
(25 April, 2023 - 12:51 AM)ElitePro Wrote: Show MoreQuote:.container {
position: relative;
}
.real_psycho {
position: relative;
letter-spacing: .02em;
text-shadow: 0.75px 0.75px 7px #1abc9c;
font-weight: 600;
background: transparent;
background-image: repeating-linear-gradient(135deg, #00FF66 25%, #009900 75%);
background-size: 10em;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: raining 2s linear infinite;
}
.star {
position: absolute;
top: -0.4em;
left: -1.65em;
width: 1.8em;
height: 1em;
background-image: url(https://i.imgur.com/pfVdImA.png);
background-size: contain;
transform: rotate(335deg);
z-index: 9999;
}
.real_psycho:after {
background-image: url(https://i.imgur.com/VVYmnng.gif);
background-size: 15% 100%;
display: inline-block;
position: absolute;
width: 15%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
opacity: 0.3;
content: '';
}
@keyframes raining {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px 1000px;
}
}
If that doesn't work here's with html as I'm a goofball:
Quote:<div class="container">
<div class="star"></div>
<div class="real_psycho">RealPsycho</div>
</div>
<style>
.container {
position: relative;
}
.real_psycho {
position: relative;
letter-spacing: .02em;
text-shadow: 0.75px 0.75px 7px #1abc9c;
font-weight: 600;
background: transparent;
background-image: repeating-linear-gradient(135deg, #00FF66 25%, #009900 75%);
background-size: 10em;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: raining 2s linear infinite;
}
.star {
position: absolute;
top: -0.4em;
left: -1.65em;
width: 1.8em;
height: 1em;
background-image: url(https://i.imgur.com/pfVdImA.png);
background-size: contain;
transform: rotate(335deg);
z-index: 9999;
}
.real_psycho:after {
background-image: url(https://i.imgur.com/VVYmnng.gif);
background-size: 15% 100%;
display: inline-block;
position: absolute;
width: 15%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
opacity: 0.3;
content: '';
}
@keyframes raining {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px 1000px;
}
}
</style>
can u send me how it would like in a gif or video because its not working on user css extension
Why Worship Legends When You Know That You Can Join em?
This post is by a banned member (Drainer) - Unhide
01 May, 2023 - 12:52 PM
Reply
This post is by a banned member (ElitePro) - Unhide
02 May, 2023 - 09:14 PM
Reply
use any css code editor online and you can see cause when I send it, its too pixelated
e
This post is by a banned member (ElitePro) - Unhide
03 May, 2023 - 07:51 PM
(This post was last modified: 03 May, 2023 - 07:51 PM by ElitePro.)
Reply
oh I already replied, I thought I didnt reply
e
This post is by a banned member (Drainer) - Unhide
07 May, 2023 - 12:27 AM
Reply
This post is by a banned member (Kucoin) - Unhide
08 May, 2023 - 05:04 AM
Reply
Code: <div class="box">
</div>
<span class="real_debil">RealPsycho</span>
Code: body {
background-color:#2a2a2a;
text-align: center;
}
.box {
padding: 50px;
right: 200px;
display: block;
}
.real_debil {
font-family: 'Arial';
text-shadow: 1px 1px 15px #c0392b;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text, border-box, border-box;
background-image:
linear-gradient(
135deg,
rgb(255, 255, 157) 0%,
rgb(255, 31, 31) 20%,
rgb(255, 119, 31) 40%,
rgb(255, 234, 15) 60%,
rgb(70, 236, 20) 80%,
rgb(70, 170, 236) 100%
), /* This sets the linear gradient background */
url(https://i.imgur.com/7jDQ33X.gif),url();
background-size: 35% 1000%, 4em, 10em;
animation: DebilAnim 2.5s cubic-bezier(0.4, 0, 1, 1) 0s infinite running;
animation: DebilHue 5s cubic-bezier(0.4, 0, 1, 1) 0s infinite running;
transition: .3s;
position:relative;
}
.real_debil:before {
background-image: url(https://static.cracked.io//images/items/moneywings.gif);
background-size: 100%;
position: absolute;
width: 15px;
height: 15px;
animation: DebilWings 15s cubic-bezier(1, 1, 1, 1) 0s infinite running;
transform: rotate(0deg) translateY(-50%);
content: '';
}
@keyframes DebilWings {
0% {
left: -0.5em;
opacity: 0;
}
5% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
left: 5.5em;
}
}
@keyframes DebilAnim{
0% {
background-position: 0% 50%, 0%, 0%
}
100% {
background-position: 100% 50%, 0%, 0%
}
}
@keyframes DebilHue {
from {
-webkit-filter:hue-rotate(0deg);
background-position:0 0,0 0,-10em 0;
}
to {
-webkit-filter:hue-rotate(360deg);
background-position:0 0,0 0,10em 0;
}
}
This post is by a banned member (Quinzel) - Unhide
2.935
Posts
1.053
Threads
4 Years of service
08 May, 2023 - 09:17 AM
Reply
This post is by a banned member (Drainer) - Unhide
11 May, 2023 - 05:56 PM
Reply
(08 May, 2023 - 09:17 AM)Quinzel Wrote: Show More
pasted i guess
|