- Версия XenForo
- 2.0
Баннеры и префиксы могут быть доработаны в ближайшее время
Если вы увидели, что уже где-то слито именно такое, то дайте ссылку на данный ресурс, дабы избежать повторения
Код:
.vlad, .glavsled, .zamglavsled, .lider, .kur, .rykvod, .pomtech,
.server1a, .server2a, .server3a,
.ban, .specadm, .moroz, .modr, .vklad, .sliva, .legend, .sist,
.mlmoder, .stmoder, .zgta, .techadm, .adm, .stadm, .tpshka,
.tester, .forum, .glavadm, .kk, .dir, .gm, .zga, .prmanager, .stsostav {
color: #fff;
border: 1.2px solid;
font-size: .7rem;
font-weight: 700;
padding: 5px 14px;
border-radius: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
cursor: default;
text-transform: uppercase;
letter-spacing: .3px;
min-height: 28px;
line-height: 1.2;
margin: 0 2px 3px 0;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
box-shadow: 0 0 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3);
transition: all .25s ease;
}
.userBanner { margin: 0 3px 4px 0 !important; }
.vlad, .glavadm, .dir, .specadm, .moroz, .zga {
background: linear-gradient(135deg, #d80000, #f33);
border-color: #B30000;
}
.vlad::after, .glavadm::after { content: '👑'; color: gold; }
.dir::after { content: '🎯'; color: #ffcc00; }
.specadm::after { content: '🛡️'; color: #FFD700; }
.moroz::after { content: '❄️'; color: #00CCFF; }
.zga::after { content: '✅'; color: #00ff00; }
.glavsled, .zamglavsled {
background: linear-gradient(135deg, #1878ff, #4d9cff);
border-color: #0D68EE;
}
.glavsled::after { content: '🔍'; }
.zamglavsled::after { content: '🔎'; color: #FFD700; }
.lider {
background: linear-gradient(135deg, #ffa500, #ffc966);
border-color: #E69500;
}
.lider::after { content: '👑'; color: #FF5500; }
.prmanager {
background: linear-gradient(135deg, #f07b14, #ff9e40);
border-color: #D66B10;
}
.prmanager::after { content: '📢'; color: #FFD700; }
.stmoder, .mlmoder {
background: linear-gradient(135deg, #54d3bf, #7ae8d6);
border-color: #3AC0AB;
}
.stmoder::after { content: '📊'; }
.mlmoder::after { content: '🤖'; }
.modr {
background: linear-gradient(135deg, #abcdef, #cde6ff);
border-color: #9ABCDE;
}
.modr::after { content: '🛡️'; }
.techadm, .pomtech {
background: linear-gradient(135deg, #ff4d00, #ff8040);
border-color: #E64600;
}
.techadm::after { content: '🔧'; color: #FFD700; }
.pomtech::after { content: '🔩'; }
.sist {
background: linear-gradient(135deg, #57cdd6, #7de8f0);
border-color: #45BCC5;
}
.sist::after { content: '⚙️'; }
.vklad {
background: linear-gradient(135deg, #66f, #99f);
border-color: #33f;
}
.vklad::after { content: '💰'; color: #FFD700; }
.sliva {
background: linear-gradient(135deg, #ff5d76, #ff8da1);
border-color: #FF4466;
}
.sliva::after { content: '💧'; color: #00BFFF; }
.forum {
background: linear-gradient(135deg, #a200ff, #c266ff);
border-color: #8C00E6;
}
.forum::after { content: '💬'; }
.legend {
background: linear-gradient(135deg, #32cd32, #6f6);
border-color: #28B428;
}
.legend::after { content: '👑'; color: #FFD700; }
.zgta {
background: linear-gradient(135deg, #ff74a8, #ffa6cc);
border-color: #FF5C99;
}
.zgta::after { content: '🎀'; }
.tpshka {
background: linear-gradient(135deg, #deb887, #f5d4aa);
border-color: #C9A87A;
}
.tpshka::after { content: '🛠️'; color: #8B4513; }
.tester {
background: linear-gradient(135deg, #8287c1, #a5a9d6);
border-color: #6A6FB0;
}
.tester::after { content: '🧪'; }
.kk {
background: linear-gradient(135deg, #88ecdf, #b2f5ea);
border-color: #66D9C7;
}
.kk::after { content: '⚡'; color: #0077cc; }
.gm {
background: linear-gradient(135deg, #09f, #3bf);
border-color: #0077cc;
}
.gm::after { content: '🛡️'; color: #ffff00; }
.stsostav {
background: #6A5ACD;
border-color: #6A5ACD;
}
.stsostav::after { content: '🌟'; }
.server1a { background: linear-gradient(135deg,#d80000,#f33); border-color:#B30000; }
.server1a::after { content:'🔴'; }
.server2a { background: linear-gradient(135deg,#008000,#0a0); border-color:#006600; }
.server2a::after { content:'🟢'; }
.server3a { background: linear-gradient(135deg,#004eff,#37f); border-color:#003BD6; }
.server3a::after { content:'🔶'; color:#FF9900; }
.glavadm, .dir, .prmanager, .techadm, .adm, .stadm, .legend, .glavsled, .rykvod, .specadm, .vlad, .stsostav {
animation: subtlePulse 4s infinite;
}
@media (prefers-color-scheme: dark) {
.vlad, .glavsled, .zamglavsled, .lider, .kur, .rykvod, .pomtech,
.server1a, .server2a, .server3a,
.ban, .specadm, .moroz, .modr, .vklad, .sliva, .legend, .sist,
.mlmoder, .stmoder, .zgta, .techadm, .adm, .stadm, .tpshka,
.tester, .forum, .glavadm, .kk, .dir, .gm, .zga, .prmanager, .stsostav {
box-shadow: 0 0 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
}
Код:
.prefixBall {
color: #ffffff;
background: linear-gradient(45deg, #c62828 0%, #e53935 25%, #d32f2f 50%, #f44336 75%, #c62828 100%);
background-size: 300% 300%;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border-radius: 50px;
text-align: center;
display: inline-block;
box-shadow: inset 0 0 25px rgba(255,255,255,0.3),0 4px 15px rgba(198,40,40,0.4);
position: relative;
overflow: hidden;
transition: all .3s ease;
animation: gradientFlow 5s ease infinite;
text-shadow: 0 1px 2px rgba(0,0,0,0.3)
}
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.prefixBall::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50px;
box-shadow: inset 0 0 40px rgba(255,255,255,0.2), inset 0 0 60px rgba(255,215,0,0.1);
pointer-events: none;
}
.prefixBall::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
transform: rotate(45deg);
opacity: 0;
transition: opacity .3s ease;
}
.prefixBall:hover::after {
opacity: 1;
animation: shineMove 1.5s ease;
}
@keyframes shineMove {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.prefixBall:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: inset 0 0 30px rgba(255,255,255,0.4),0 6px 25px rgba(198,40,40,0.6);
animation-duration: 3s;
}
.prefixBall:active {
transform: translateY(1px) scale(.98);
}
.prefixBall .icon {
display: inline-block;
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-3px) rotate(10deg); }
}
@media (max-width: 650px) {
.prefixBall {
font-size:70%;
padding: 1px 15px;
animation-duration: 7s;
}
}
@media (prefers-color-scheme: dark) {
.prefixBall {
box-shadow: inset 0 0 25px rgba(255,255,255,0.2),0 4px 15px rgba(198,40,40,0.6);
}
.prefixBall:hover {
box-shadow: inset 0 0 30px rgba(255,255,255,0.3),0 6px 25px rgba(198,40,40,0.8);
}
}
.pgreen, .porange, .paqua, .pred, .ypred, .bpred {
text-transform: uppercase;
font-size: 66%;
padding: 3px 6px;
border-radius: 10px;
text-align: center;
position: relative;
overflow: hidden;
color: white;
box-shadow: 0px 0px 6px;
transition: all .3s ease;
}
.pgreen { background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22); animation: christmasTree 4s ease infinite; box-shadow: 0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3); }
.pgreen::before { content: '🎄'; margin-right: 3px; animation: treeWobble 2s infinite ease-in-out; }
@keyframes christmasTree { 0%,100% { background-position:0% 50%; box-shadow:0px 0px 6px #32cd32 } 50% { background-position:100% 50%; box-shadow:0px 0px 12px #32cd32 } }
@keyframes treeWobble { 0%,100%{ transform: rotate(0deg) } 25% { transform: rotate(-5deg) } 75% { transform: rotate(5deg) } }
.porange { background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00); animation: mandarinGlow 3s infinite alternate; box-shadow: 0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3); }
.porange::after { content: '🍊'; margin-left: 3px; animation: fruitBounce 1.5s infinite; }
@keyframes mandarinGlow { from { background-position:0% 50%; box-shadow:0px 0px 6px #ff9800 } to { background-position:100% 50%; box-shadow:0px 0px 15px #ff9800 } }
@keyframes fruitBounce { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
.paqua { background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4); animation: iceFlow 5s linear infinite; box-shadow: 0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2); }
.paqua::before { content: '❄️'; margin-right: 3px; animation: snowflakeSpin 4s infinite linear; }
@keyframes iceFlow { 0% { background-position:0% 50%; filter: brightness(1) } 50% { background-position:100% 50%; filter: brightness(1.2) } 100% { background-position:0% 50%; filter: brightness(1) } }
.pred { background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00); animation: ballGlow 3s ease-in-out infinite; box-shadow: 0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4); }
.pred::after { content: '🔴'; margin-left: 3px; font-size: 10px; animation: shineReflect 2s infinite; }
@keyframes ballGlow { 0%,100% { background-position:0% 50%; box-shadow:0px 0px 6px #f00 } 50% { background-position:100% 50%; box-shadow:0px 0px 15px #f00,0px 0px 25px #f44 } }
@keyframes shineReflect { 0%,100% { opacity:0.7 } 50% { opacity:1 } }
.ypred { background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018); animation: goldFire 2s infinite alternate; box-shadow:0px 0px 6px #ffc018,inset 0 0 10px rgba(255,193,7,0.4); color:black; text-shadow:0 1px 1px rgba(255,255,255,0.5); }
.ypred::before { content: '✨'; margin-right:3px; animation: sparkleTwinkle 1s infinite alternate; }
@keyframes goldFire { from { background-position:0% 50%; box-shadow:0px 0px 6px #ffc018 } to { background-position:100% 50%; box-shadow:0px 0px 12px #ffc018,0px 0px 20px #ffd700 } }
.bpred { background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff); animation: nightSky 6s ease infinite; box-shadow:0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3); }
.bpred::after { content: '⭐'; margin-left: 3px; font-size: 10px; animation: starTwinkle 1.5s infinite alternate; }
@keyframes nightSky { 0%{ background-position:0% 50%; filter:brightness(1) } 50%{ background-position:100% 50%; filter:brightness(1.1) } 100%{ background-position:0% 50%; filter:brightness(1) } }
@keyframes starTwinkle { from{opacity:0.3; transform:scale(.9)} to{opacity:1; transform:scale(1.1)} }
@media (max-width:650px) { .pgreen,.porange,.paqua,.pred,.ypred,.bpred { font-size:60%; padding:2px 5px; } }
Если вы увидели, что уже где-то слито именно такое, то дайте ссылку на данный ресурс, дабы избежать повторения