Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Баннеры

Июл
762
1,024
Пользователь
OFFTOP

рейдж раша, блес раша, блек раша, там сколько этих раш вообще?
детям на столько не нравится их страна в реале что они делают виртуальные?

 
Лучше плохо начать, чем хорошо бездействовать
Ноя
2,318
1,824
Профессионал
OFFTOP

рейдж раша, блес раша, блек раша, там сколько этих раш вообще?
детям на столько не нравится их страна в реале что они делают виртуальные?

OFFTOP

В виртуальной стране жить проще, чем в настоящем мире)

 
Фев
94
15
Пользователь
дайте пж баннеры как у рейдж раши! прошу
.gradientBanner {
position: relative
}

.gradientBanner:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: ;
animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
0% {
opacity: .1;
width: 0
}

50% {
opacity: .5
}

100% {
opacity: 0;
width: 100%
}
}

.gradientBanner {
font-size: 80%;
font-weight: 400;
font-style: normal;
padding: 1px 10px;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: 2px;
text-align: center;
display: inline-block
}

.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.yspeshniy {
color: #fff;
background: #20aeb3;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.specadm {
color: #fff;
background: #d80000;
border-color: #a50000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.razrab {
color: #fff;
background: #1cb4d6;
border-color: #1cb4d6;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.ga {
color: #fff;
background: #0a8208;
border-color: #e83f3f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.zga {
color: #fff;
background: #6DB36D;
border-color: #55a154;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.redd {
color: #fff;
background: #7f5b5b;
border-color: #7f5b5b;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.mur {
color: #fff;
background: #396798;
border-color: #396798;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.kur {
color: #fff;
background: #9676f5;
border-color: #b459ff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.tech {
color: #fff;
background: #ff6f0f;
border-color: #ff6f0f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.ld {
color: #fff;
background: #74cfe8;
border-color: #74cfe8;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.admin {
color: #fff;
background: #4284f5;
border-color: #4284f5;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.admins {
color: #fff;
background: #f2b852;
border-color: #326fa8;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.moder {
color: #fff;
background: #26bbed;
border-color: #26bbed;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.kp {
color: #000;
background: #FDC000;
border-color: #FDC000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.staff {
color: #fff;
background: black;
border-color: black;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.piar {
color: #fff;
background: #f5a142;
border-color: #f5a142;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.support {
color: #fff;
background: #a83c32;
border-color: #a83c32;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.test {
color: #000;
background: #20DCD9;
border-color: #20DCD9;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.rukds {
color: #fff;
background: #188EFF;
border-color: #188EFF;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.gta {
color: #fff;
background: #ff6f0f;
border-color: #ff6f0f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.zgta {
color: #fff;
background: #f24444;
border-color: #000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.pet {
color: #fff;
background: #ffcd00;
border-color: #ffcd00;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.user {
color: #fff;
background: #ababab;
border-color: #ababab;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.vet {
color: #fff;
background: #a408ff;
border-color: #a408ff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.blok {
color: #fff;
background: #ababab;
border-color: #ababab;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.gradientBanner.red {
box-shadow: 0px 0px 5px #ff0000;
background-color: #ff0000;
border-color: #ff0000;
color: #fff
}
.gradientBanner.green {
box-shadow: 0px 0px 5px green;
background-color: green;
border-color: green;
color: #fff
}
.gradientBanner.yellow {
box-shadow: 0px 0px 5px #Fdc000;
background-color: #Fdc000;
border-color: #Fdc000;
color: #fff
}
.gradientBanner.white {
box-shadow: 0px 0px 5px #ababab;
background-color: #ababab;
border-color: #ababab;
color: #fff
}
.gradientBanner.ber {
box-shadow: 0px 0px 5px #20DCD9;
background-color: #20DCD9;
border-color: #20DCD9;
color: #fff
}
.userBanner.userBanner--staff
{
display: none;
}
.blog {
color: #fff;
background: #a8608e;
border-color: #a8608e;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.dev_vinter_ruk {
color: #fff;
background: #d80000;
border-color: #a50000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;

z-index: 1;
}

/* Звёздочки */
.dev_vinter_ruk::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
radial-gradient(white 20%, transparent 20%),
radial-gradient(white 20%, transparent 20%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
animation: starsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

/* Анимация движения звёзд */
@keyframes starsMove {
from {
background-position: 0 0, 10px 10px;
}
to {
background-position: -40px -40px, -30px -30px;
}
}
.dev_vinter_dev {
color: #00ffcc;
background: #0d1b15;
border-color: #00ffcc;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 2px 22px;
border: 1px solid;
border-radius: 4px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
font-family: 'Courier New', monospace;
box-shadow:
0 0 5px rgba(0, 255, 204, 0.3),
0 0 10px rgba(0, 255, 204, 0.2),
0 0 20px rgba(0, 255, 204, 0.1);
transition: all 0.3s ease;
}

.dev_vinter_dev:hover {
box-shadow:
0 0 10px rgba(0, 255, 204, 0.6),
0 0 20px rgba(0, 255, 204, 0.4),
0 0 30px rgba(0, 255, 204, 0.3);
transform: scale(1.05);
}

/* Фоновая сетка */
.dev_vinter_dev::before {
content: '';
position: absolute;
top: -50%; left: -50%; right: -50%; bottom: -50%;
background-image:
linear-gradient(90deg, rgba(0,255,204,0.05) 1px, transparent 1px),
linear-gradient(rgba(0,255,204,0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 0;
opacity: 0.15;
animation: gridMove 3s linear infinite;
pointer-events: none;
}

@keyframes gridMove {
from { transform: translateX(0) translateY(0); }
to { transform: translateX(20px) translateY(20px); }
}

/* Бегущие символы поверх фона */
.dev_vinter_dev::after {
content: '0 1 [ ] { } = ; / \\ * & ^ % $ # @ !';
position: absolute;
top: -20px;
left: 0;
white-space: nowrap;
font-family: monospace;
font-size: 14px;
color: rgba(0, 255, 204, 0.2);
animation: codeScroll 8s linear infinite;
z-index: 0;
pointer-events: none;
letter-spacing: 1px;
}

@keyframes codeScroll {
from {
transform: translateY(0);
}
to {
transform: translateY(100px);
}
}

/* Эффект пульсации светодиодной подсветки */
@keyframes neonPulse {
0%, 100% {
box-shadow:
0 0 5px rgba(0, 255, 204, 0.6),
0 0 10px rgba(0, 255, 204, 0.4);
}
50% {
box-shadow:
0 0 10px rgba(0, 255, 204, 0.8),
0 0 20px rgba(0, 255, 204, 0.5);
}
}
/* Основной стиль для краски */
.dev_vinter_forum {
color: #fff;
background: linear-gradient(135deg, #a8608e, #7a3b7a);
border-color: #7a3b7a;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

.dev_vinter_vlad {
color: #fff;
background: linear-gradient(135deg, #ff0000, #ff0000);
border-color: #ff0000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

/* Символы сообщений */
.dev_vinter_forum::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
background-size: 40px 40px; /* Размер иконок */
background-repeat: repeat; /* Повторение иконок */
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.dev_vinter_vlad::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
background-size: 40px 40px; /* Размер иконок */
background-repeat: repeat; /* Повторение иконок */
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

/* Анимация движения символов */
@keyframes symbolsMove {
from {
background-position: 0 0;
}
to {
background-position: -40px -40px;
}
}
.dev_vinter_vp {
color: #fff;
border: none; /* Убираем стандартную рамку */
font-size: 75%;
font-weight: 600;
font-style: normal;
padding: 1px 20px;
border-radius: 4px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff
}

/* Подсветка по краям */
.dev_vinter_vp::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border: 2px solid transparent;
background: linear-gradient(
45deg,
#ff00ff, #00ffff, #ff00ff, #00ffff
);
background-size: 400% 400%;
border-radius: 10px;
animation: edgeLight 3s infinite linear;
z-index: -1;
filter: blur(2px);
}

/* Анимация бегущей подсветки */
@keyframes edgeLight {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}

/* Эффект мерцающих частиц */
.dev_vinter_vp::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
radial-gradient(circle, rgba(255, 0, 255, 0.5) 10%, transparent 10%),
radial-gradient(circle, rgba(0, 255, 255, 0.5) 10%, transparent 10%);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
animation: particlesMove 6s linear infinite;
opacity: 0.7;
z-index: 0;
pointer-events: none;
}

/* Анимация светящихся частиц */
@keyframes particlesMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-25px, -25px);
}
}

/* Мерцающий текст */
.dev_vinter_vp span {
animation: neonText 2s infinite alternate;
}

/* Анимация неонового текста */
@keyframes neonText {
0% {
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff;
}
100% {
text-shadow:
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff,
0 0 80px #ff00ff,
0 0 120px #ff00ff;
}
}
.dev_vinter_vip {
color: #fff;
background: #ff6f61; /* Яркий коралловый */
border-color: #e04b3f; /* Темный оттенок для границы */
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

/* Контейнер для чупа-чупса */
.dev_vinter_vip::before {
content: '';
position: absolute;
bottom: -50px; /* Начальная позиция снизу */
left: 50%;
transform: translateX(-50%);
width: 15px; /* Ширина всего объекта */
height: 35px; /* Высота всего объекта (круг + палочка) */
background: linear-gradient(to bottom,
#ff005c 0%, /* Цвет леденца */
#ff005c 60%, /* Конец леденца */
#d2691e 60%, /* Начало палочки */
#8b4513 100% /* Конец палочки */
);
clip-path: polygon(
50% 0%, /* Верхняя точка круга */
100% 50%, /* Правая сторона круга */
100% 60%, /* Начало палочки справа */
50% 100%, /* Нижняя точка палочки */
0% 60%, /* Начало палочки слева */
0% 50% /* Левая сторона круга */
);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6); /* Блики на леденце */
animation: moveUpDiagonal 5s linear infinite, lollipopSpin 5s linear infinite, lollipopShine 3s ease-in-out infinite;
z-index: -1; /* Размещаем на заднем плане */
}

/* Анимация блеска на леденце */
@keyframes lollipopShine {
0% {
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6);
}
50% {
box-shadow: 0 0 9px rgba(255, 255, 255, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.8);
}
100% {
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6);
}
}

/* Анимация движения снизу вверх по диагонали */
@keyframes moveUpDiagonal {
from {
bottom: -50px; /* Начальная позиция (снизу) */
transform: translateX(-50%) translateY(0) rotate(0deg);
}
to {
bottom: 150%; /* Конечная позиция (вверху) */
transform: translateX(-50%) translateY(-100px) rotate(0deg);
}
}

/* Анимация вращения */
@keyframes lollipopSpin {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
.dev_vinter_table {
position: relative;
overflow: hidden;
background: linear-gradient(45deg, #1b5e20, #2e7d32, #388e3c, #2e7d32, #1b5e20);
background-size: 300% 300%;
animation: gradientShift 3s ease infinite;

}

.dev_vinter_table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M4 4h16v16H4V4zm2 2v2h4V6H6zm6 0v2h4V6h-4zm-6 4v2h4v-2H6zm6 0v2h4v-2h-4zm-6 4v2h4v-2H6zm6 0v2h4v-2h-4z'/%3E%3C/svg%3E");
background-size: 40px 40px;
background-repeat: repeat;
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

@keyframes symbolsMove {
from {
background-position: 0 0;
}
to {
background-position: -40px -40px;
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
 
Мар
31
5
Пользователь
.gradientBanner {
position: relative
}

.gradientBanner:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: ;
animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
0% {
opacity: .1;
width: 0
}

50% {
opacity: .5
}

100% {
opacity: 0;
width: 100%
}
}

.gradientBanner {
font-size: 80%;
font-weight: 400;
font-style: normal;
padding: 1px 10px;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: 2px;
text-align: center;
display: inline-block
}

.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.legend {
color: #fff;
background: #8c5eff;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.yspeshniy {
color: #fff;
background: #20aeb3;
border-color: #fff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.specadm {
color: #fff;
background: #d80000;
border-color: #a50000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.razrab {
color: #fff;
background: #1cb4d6;
border-color: #1cb4d6;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.ga {
color: #fff;
background: #0a8208;
border-color: #e83f3f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.zga {
color: #fff;
background: #6DB36D;
border-color: #55a154;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.redd {
color: #fff;
background: #7f5b5b;
border-color: #7f5b5b;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.mur {
color: #fff;
background: #396798;
border-color: #396798;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.kur {
color: #fff;
background: #9676f5;
border-color: #b459ff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.tech {
color: #fff;
background: #ff6f0f;
border-color: #ff6f0f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.ld {
color: #fff;
background: #74cfe8;
border-color: #74cfe8;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.admin {
color: #fff;
background: #4284f5;
border-color: #4284f5;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.admins {
color: #fff;
background: #f2b852;
border-color: #326fa8;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.moder {
color: #fff;
background: #26bbed;
border-color: #26bbed;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.kp {
color: #000;
background: #FDC000;
border-color: #FDC000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.staff {
color: #fff;
background: black;
border-color: black;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.piar {
color: #fff;
background: #f5a142;
border-color: #f5a142;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.support {
color: #fff;
background: #a83c32;
border-color: #a83c32;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.test {
color: #000;
background: #20DCD9;
border-color: #20DCD9;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.rukds {
color: #fff;
background: #188EFF;
border-color: #188EFF;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.gta {
color: #fff;
background: #ff6f0f;
border-color: #ff6f0f;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.zgta {
color: #fff;
background: #f24444;
border-color: #000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.pet {
color: #fff;
background: #ffcd00;
border-color: #ffcd00;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.user {
color: #fff;
background: #ababab;
border-color: #ababab;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.vet {
color: #fff;
background: #a408ff;
border-color: #a408ff;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.blok {
color: #fff;
background: #ababab;
border-color: #ababab;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.gradientBanner.red {
box-shadow: 0px 0px 5px #ff0000;
background-color: #ff0000;
border-color: #ff0000;
color: #fff
}
.gradientBanner.green {
box-shadow: 0px 0px 5px green;
background-color: green;
border-color: green;
color: #fff
}
.gradientBanner.yellow {
box-shadow: 0px 0px 5px #Fdc000;
background-color: #Fdc000;
border-color: #Fdc000;
color: #fff
}
.gradientBanner.white {
box-shadow: 0px 0px 5px #ababab;
background-color: #ababab;
border-color: #ababab;
color: #fff
}
.gradientBanner.ber {
box-shadow: 0px 0px 5px #20DCD9;
background-color: #20DCD9;
border-color: #20DCD9;
color: #fff
}
.userBanner.userBanner--staff
{
display: none;
}
.blog {
color: #fff;
background: #a8608e;
border-color: #a8608e;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block
}
.dev_vinter_ruk {
color: #fff;
background: #d80000;
border-color: #a50000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;

z-index: 1;
}

/* Звёздочки */
.dev_vinter_ruk::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
radial-gradient(white 20%, transparent 20%),
radial-gradient(white 20%, transparent 20%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
animation: starsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

/* Анимация движения звёзд */
@keyframes starsMove {
from {
background-position: 0 0, 10px 10px;
}
to {
background-position: -40px -40px, -30px -30px;
}
}
.dev_vinter_dev {
color: #00ffcc;
background: #0d1b15;
border-color: #00ffcc;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 2px 22px;
border: 1px solid;
border-radius: 4px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
font-family: 'Courier New', monospace;
box-shadow:
0 0 5px rgba(0, 255, 204, 0.3),
0 0 10px rgba(0, 255, 204, 0.2),
0 0 20px rgba(0, 255, 204, 0.1);
transition: all 0.3s ease;
}

.dev_vinter_dev:hover {
box-shadow:
0 0 10px rgba(0, 255, 204, 0.6),
0 0 20px rgba(0, 255, 204, 0.4),
0 0 30px rgba(0, 255, 204, 0.3);
transform: scale(1.05);
}

/* Фоновая сетка */
.dev_vinter_dev::before {
content: '';
position: absolute;
top: -50%; left: -50%; right: -50%; bottom: -50%;
background-image:
linear-gradient(90deg, rgba(0,255,204,0.05) 1px, transparent 1px),
linear-gradient(rgba(0,255,204,0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 0;
opacity: 0.15;
animation: gridMove 3s linear infinite;
pointer-events: none;
}

@keyframes gridMove {
from { transform: translateX(0) translateY(0); }
to { transform: translateX(20px) translateY(20px); }
}

/* Бегущие символы поверх фона */
.dev_vinter_dev::after {
content: '0 1 [ ] { } = ; / \\ * & ^ % $ # @ !';
position: absolute;
top: -20px;
left: 0;
white-space: nowrap;
font-family: monospace;
font-size: 14px;
color: rgba(0, 255, 204, 0.2);
animation: codeScroll 8s linear infinite;
z-index: 0;
pointer-events: none;
letter-spacing: 1px;
}

@keyframes codeScroll {
from {
transform: translateY(0);
}
to {
transform: translateY(100px);
}
}

/* Эффект пульсации светодиодной подсветки */
@keyframes neonPulse {
0%, 100% {
box-shadow:
0 0 5px rgba(0, 255, 204, 0.6),
0 0 10px rgba(0, 255, 204, 0.4);
}
50% {
box-shadow:
0 0 10px rgba(0, 255, 204, 0.8),
0 0 20px rgba(0, 255, 204, 0.5);
}
}
/* Основной стиль для краски */
.dev_vinter_forum {
color: #fff;
background: linear-gradient(135deg, #a8608e, #7a3b7a);
border-color: #7a3b7a;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

.dev_vinter_vlad {
color: #fff;
background: linear-gradient(135deg, #ff0000, #ff0000);
border-color: #ff0000;
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

/* Символы сообщений */
.dev_vinter_forum::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
background-size: 40px 40px; /* Размер иконок */
background-repeat: repeat; /* Повторение иконок */
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.dev_vinter_vlad::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
background-size: 40px 40px; /* Размер иконок */
background-repeat: repeat; /* Повторение иконок */
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

/* Анимация движения символов */
@keyframes symbolsMove {
from {
background-position: 0 0;
}
to {
background-position: -40px -40px;
}
}
.dev_vinter_vp {
color: #fff;
border: none; /* Убираем стандартную рамку */
font-size: 75%;
font-weight: 600;
font-style: normal;
padding: 1px 20px;
border-radius: 4px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff
}

/* Подсветка по краям */
.dev_vinter_vp::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
border: 2px solid transparent;
background: linear-gradient(
45deg,
#ff00ff, #00ffff, #ff00ff, #00ffff
);
background-size: 400% 400%;
border-radius: 10px;
animation: edgeLight 3s infinite linear;
z-index: -1;
filter: blur(2px);
}

/* Анимация бегущей подсветки */
@keyframes edgeLight {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}

/* Эффект мерцающих частиц */
.dev_vinter_vp::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
radial-gradient(circle, rgba(255, 0, 255, 0.5) 10%, transparent 10%),
radial-gradient(circle, rgba(0, 255, 255, 0.5) 10%, transparent 10%);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
animation: particlesMove 6s linear infinite;
opacity: 0.7;
z-index: 0;
pointer-events: none;
}

/* Анимация светящихся частиц */
@keyframes particlesMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-25px, -25px);
}
}

/* Мерцающий текст */
.dev_vinter_vp span {
animation: neonText 2s infinite alternate;
}

/* Анимация неонового текста */
@keyframes neonText {
0% {
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff;
}
100% {
text-shadow:
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #ff00ff,
0 0 80px #ff00ff,
0 0 120px #ff00ff;
}
}
.dev_vinter_vip {
color: #fff;
background: #ff6f61; /* Яркий коралловый */
border-color: #e04b3f; /* Темный оттенок для границы */
font-size: 75%;
font-weight: 400;
font-style: normal;
padding: 1px 20px;
border: 1px solid transparent;
border-radius: 3px;
text-align: center;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}

/* Контейнер для чупа-чупса */
.dev_vinter_vip::before {
content: '';
position: absolute;
bottom: -50px; /* Начальная позиция снизу */
left: 50%;
transform: translateX(-50%);
width: 15px; /* Ширина всего объекта */
height: 35px; /* Высота всего объекта (круг + палочка) */
background: linear-gradient(to bottom,
#ff005c 0%, /* Цвет леденца */
#ff005c 60%, /* Конец леденца */
#d2691e 60%, /* Начало палочки */
#8b4513 100% /* Конец палочки */
);
clip-path: polygon(
50% 0%, /* Верхняя точка круга */
100% 50%, /* Правая сторона круга */
100% 60%, /* Начало палочки справа */
50% 100%, /* Нижняя точка палочки */
0% 60%, /* Начало палочки слева */
0% 50% /* Левая сторона круга */
);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6); /* Блики на леденце */
animation: moveUpDiagonal 5s linear infinite, lollipopSpin 5s linear infinite, lollipopShine 3s ease-in-out infinite;
z-index: -1; /* Размещаем на заднем плане */
}

/* Анимация блеска на леденце */
@keyframes lollipopShine {
0% {
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6);
}
50% {
box-shadow: 0 0 9px rgba(255, 255, 255, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.8);
}
100% {
box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.6);
}
}

/* Анимация движения снизу вверх по диагонали */
@keyframes moveUpDiagonal {
from {
bottom: -50px; /* Начальная позиция (снизу) */
transform: translateX(-50%) translateY(0) rotate(0deg);
}
to {
bottom: 150%; /* Конечная позиция (вверху) */
transform: translateX(-50%) translateY(-100px) rotate(0deg);
}
}

/* Анимация вращения */
@keyframes lollipopSpin {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
.dev_vinter_table {
position: relative;
overflow: hidden;
background: linear-gradient(45deg, #1b5e20, #2e7d32, #388e3c, #2e7d32, #1b5e20);
background-size: 300% 300%;
animation: gradientShift 3s ease infinite;

}

.dev_vinter_table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.3'%3E%3Cpath d='M4 4h16v16H4V4zm2 2v2h4V6H6zm6 0v2h4V6h-4zm-6 4v2h4v-2H6zm6 0v2h4v-2h-4zm-6 4v2h4v-2H6zm6 0v2h4v-2h-4z'/%3E%3C/svg%3E");
background-size: 40px 40px;
background-repeat: repeat;
animation: symbolsMove 5s linear infinite;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}

@keyframes symbolsMove {
from {
background-position: 0 0;
}
to {
background-position: -40px -40px;
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
великий поступок
 
Сверху