Продавец
- Регистрация
- 28 Апр 2023
- Сообщения
- 72
- Автор темы
- #1
Баннера:
.banners-container {
display: flex;
flex-wrap: nowrap;
gap: 10px; /* чуть уменьшил промежутки */
align-items: center;
justify-content: center;
padding: 15px;
overflow-x: auto;
}
.uzerBanner {
width: 150px; /* чуть уменьшил ширину */
height: 35px; /* уменьшил высоту */
font-size: 13px; /* чуть меньше размер шрифта */
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
border-radius: 8px; /* чуть скруглил углы */
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
cursor: pointer;
padding: 0 8px;
color: #fff;
font-weight: bold;
white-space: nowrap;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
font-family: Arial, sans-serif;
}
.uzerBanner:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.uzerBanner.osnov {
background: linear-gradient(135deg, rgb(255, 87, 34), rgb(255, 193, 7)), url(https://forum.trace-rp.ru/styles/icons_v2/owner.svg);
}
.uzerBanner.osnov span {
color: #fff;
text-shadow: 0 0 8px #fff, 0 0 12px #ff0, 0 0 16px #f0f;
animation: glowOrange 1.5s infinite alternate;
}
@keyframes glowOrange {
from { text-shadow: 0 0 8px rgb(255, 165, 0), 0 0 12px #ff0, 0 0 16px #f0f; }
to { text-shadow: 0 0 12px rgb(255, 165, 0), 0 0 16px #ff0, 0 0 20px #f0f; }
}
.uzerBanner.zgadmin {
background: linear-gradient(135deg, rgb(255, 111, 97), rgb(255, 204, 112)), url(https://forum.trace-rp.ru/styles/icons_v2/deputy_admin.svg);
}
.uzerBanner.zgadmin span {
color: rgb(255, 255, 0);
text-shadow: 0 0 10px rgb(255, 255, 0), 0 0 20px #ff0, 0 0 30px #ff0;
animation: flickerYellow 2s infinite;
}
@keyframes flickerYellow {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 22%, 24%, 55% { opacity: 0.4; }
}
.uzerBanner.gadmin {
background: linear-gradient(135deg, rgb(0, 195, 255), rgb(0, 91, 255)), url(https://forum.trace-rp.ru/styles/icons_v2/chief_admin.svg);
}
.uzerBanner.gadmin span {
color: rgb(0, 255, 255);
text-shadow: 0 0 10px rgb(0, 255, 255), 0 0 20px #0ff;
animation: pulseBlue 2s infinite;
}
@keyframes pulseBlue {
0%, 100% {
transform: scale(1);
text-shadow: 0 0 8px rgb(0, 255, 255), 0 0 12px #0ff;
}
50% {
transform: scale(1.1);
text-shadow: 0 0 12px rgb(0, 255, 255), 0 0 20px #0ff;
}
}
.uzerBanner.user {
background: linear-gradient(135deg, rgb(0, 179, 155), rgb(150, 201, 61)), url(https://forum.trace-rp.ru/styles/icons_v2/user.svg);
}
.uzerBanner.user span {
color: rgb(255, 215, 0);
text-shadow: 0 0 8px rgb(255, 215, 0), 0 0 16px #ffd700;
animation: shimmerGold 1.5s infinite alternate;
}
@keyframes shimmerGold {
from { text-shadow: 0 0 8px rgb(255, 215, 0), 0 0 16px #ffd700; }
to { text-shadow: 0 0 12px rgb(255, 215, 0), 0 0 20px #ff0; }
}
.uzerBanner.kuradm {
background: linear-gradient(135deg, rgb(0, 242, 254), rgb(78, 172, 254)), url(https://forum.trace-rp.ru/styles/icons_v2/curator.svg);
}
.uzerBanner.kuradm span {
color: rgb(0, 255, 255);
text-shadow: 0 0 10px rgb(0, 255, 255), 0 0 20px #0ff;
animation: flickerCyan 2s infinite;
}
@keyframes flickerCyan {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 22%, 24%, 55% { opacity: 0.4; }
}
.uzerBanner.tehdmin {
background: linear-gradient(135deg, rgb(247, 151, 30), rgb(255, 210, 0)), url(https://forum.trace-rp.ru/styles/icons_v2/tech_admin.svg);
}
.uzerBanner.tehdmin span {
color: rgb(255, 234, 0);
text-shadow: 0 0 8px rgb(255, 234, 0), 0 0 16px #ff0;
animation: glowYellow 1.5s infinite alternate;
}
@keyframes glowYellow {
from { text-shadow: 0 0 8px rgb(255, 234, 0), 0 0 16px #ff0; }
to { text-shadow: 0 0 12px rgb(255, 234, 0), 0 0 20px #ff0; }
}
.uzerBanner.piar {
background: linear-gradient(135deg, rgb(255, 153, 102), rgb(255, 94, 98)), url(https://i.postimg.cc/Z5G4xygJ/piarma.png);
}
.uzerBanner.piar span {
color: rgb(255, 255, 255);
text-shadow: 0 0 8px #fff, 0 0 12px #fff;
animation: glowPink 1.5s infinite alternate;
}
@keyframes glowPink {
from { text-shadow: 0 0 8px #fff, 0 0 12px #fff; }
to { text-shadow: 0 0 12px #fff, 0 0 20px #f0f; }
}
.uzerBanner.admin {
background: linear-gradient(135deg, rgb(142, 45, 226), rgb(74, 0, 228)), url(https://forum.trace-rp.ru/styles/icons_v2/administrator.svg);
}
.uzerBanner.admin span {
color: rgb(255, 105, 180);
text-shadow: 0 0 10px rgb(255, 105, 180), 0 0 20px #f0f;
animation: flickerMagenta 2s infinite;
}
@keyframes flickerMagenta {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
20%, 22%, 24%, 55% { opacity: 0.4; }
}
.uzerBanner.spec {
background: linear-gradient(135deg, rgb(0, 195, 255), rgb(255, 255, 28)), url(https://forum.trace-rp.ru/styles/icons_v2/spec_admin.svg);
}
.uzerBanner.spec span {
color: rgb(255, 255, 0);
text-shadow: 0 0 8px rgb(255, 255, 0), 0 0 16px #ff0;
animation: shimmerGold 1.5s infinite;
}
@keyframes shimmerGold {
from { text-shadow: 0 0 8px rgb(255, 255, 0), 0 0 16px #ff0; }
to { text-shadow: 0 0 12px rgb(255, 255, 0), 0 0 20px #ff0; }
}
.uzerBanner.razrab {
background: linear-gradient(135deg, rgb(247, 151, 30), rgb(255, 210, 0)), url(https://forum.trace-rp.ru/styles/icons_v2/developer.svg);
}
.uzerBanner.razrab span {
color: rgb(255, 165, 0);
text-shadow: 0 0 8px rgb(255, 165, 0), 0 0 16px #ff0;
animation: pulseOrange 1.5s infinite;
}
@keyframes pulseOrange {
0%, 100% {
transform: scale(1);
text-shadow: 0 0 8px rgb(255, 165, 0), 0 0 16px #ff0;
}
50% {
transform: scale(1.1);
text-shadow: 0 0 12px rgb(255, 165, 0), 0 0 20px #ff0;
}
}
