toplu kullanıcı adı stilleri

[root]

Merhaba, bir makalede kullanıcı stilleri sorulan soruya topluca cevap vermiştim ve şimdi kalıcı ve herkesin daha kolay bulabileceği kullanıcı adı stillerini sizinle paylaşıyorum.

1.Turuncu yıldız stili
Kod:

color:orange;
background:
url("img/star1.gif") repeat scroll 0 0%;

Sonuç:

2.Gradient stili
Kod:

background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;

Sonuç:


3.Turuncu yangın
Kod:

text-shadow: #e4a42d 1px 1px 10px;
color: #e4a42d;
font-weight: bold;
background: url(https://siteniz.com/img/fire_orange.gif);

Resim:


Sonuç:

4.Mavi yangın
Kod:

text-shadow: #6495ed 1px 1px 10px;
    color: #6495ed;
    font-weight: bold;
background: url(https://siteniz.com/img/fire_blue.gif);

Resim:


Sonuç:

5.Yeşil yangın
Kod:

text-shadow: #42bd42 1px 1px 10px;
    color: #34d834;
    font-weight: bold;
    background: url(https://siteniz.com/img/fire_green.gif);

Resim:


Sonuç:


6.Kırmızı yangın
Kod:

text-shadow: red 1px 1px 10px;
color: red;
font-weight: bold;
background: url(https://siteniz.com/img/fire_red.gif);

Resim:


Sonuç:


7.Mavi neon
Kod:

color: #fff;
    text-shadow: 1px 1px 1px #0071db, 0px 0px 3px #0071db, 0px 0px 5px #0071db, 0px 0px 7px #0071db;
    font-weight: bold;

Sonuç:


8.Parti stili
Kod:

text-shadow: #2b65ec 1px 1px 30px;
    color: #7F00FF;
    font-weight: bold;
    background: url(https://siteniz.com/img/confetti.gif);
    animation: blink 5s infinite;
    -moz-animation: blink 5s infinite;
    -webkit-animation: blink 5s infinite;
    -ms-animation: blink 5s infinite;
    -o-animation: blink 5s infinite;

Resim:


Sonuç:


9.Mor stili
Kod:

text-shadow: #800080 1px 1px 12px;
    color: MediumPurple;
    font-weight: bold;
    background: url(https://siteniz.com/img/star1.gif);

Resim:


Sonuç:



10.Gradient 2
Kod:

background-image: linear-gradient(270deg, #d83b3b, #e3ed20, #20ed2d, #2082ed, #cd20ed, #20edbe) !important;
background-size: 1200% 1200% !important;
-webkit-animation: TestBanner 30s ease infinite !important;
-moz-animation: TestBanner 30s ease infinite !important;
animation: TestBanner 30s ease infinite !important;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
font-weight: 900;

Extra.less

@-webkit-keyframes TestBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes TestBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes TestBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

Sonuç:

11. Hidden stili
Kod:

text-transform: uppercase;
    overflow: hidden;
    background: linear-gradient(90deg, #000000, #ffffff, #000000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: hiddenstil 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);

Extra.less

@keyframes hiddenstil {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

Sonuç: