Пользователь
- Регистрация
- 19 Июн 2025
- Сообщения
- 6
- Автор темы
- #1
Code Css::
.userBanner {
text-transform: uppercase;
font-weight: 800;
padding: 4px 6px 4px 4px;
border: 1px solid transparent;
border-radius: 11px;
margin-right: 5px;
text-align: center;
display: inline-flex;
justify-content: space-between;
background-size: 500% 500%;
animation: AnimBanner 10s ease infinite;
align-items: center;
align-content: center;
position: relative
}
.userBanner.userBanner--staff {
color: #fff;
background-color: #5c97bf;
border: none;
border-radius: 11px;
background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
background-size: 900% 900%
}
.userBanner.userBanner--staff::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.admin {
color: #fff;
background-color: #7fff00;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.admin::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.stadm {
color: #fff;
background-color: #32cd32;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.stadm::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.mladm {
color: #fff;
background-color: #0f0;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.mladm::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.newmember {
color: #fff;
background-color: #6c7a89;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.newmember::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.verified {
color: #fff;
background-color: #446cb3;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.verified::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.proveren {
color: #fff;
background-color: #3c7a9c;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.proveren::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.sponsor {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}
.userBanner.sponsor::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.owner {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}
.userBanner.owner::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.teh {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #ff4500, #b0284d)
}
.userBanner.teh::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.user {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #bcbbbb, #515151)
}
.userBanner.user::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.proh {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}
.userBanner.proh::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.ka {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}
.userBanner.ka::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.lider {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #da0, #f08b9a)
}
.userBanner.lider::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.zgs {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #06f, #ba55d3)
}
.userBanner.zgs::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.gs {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #49cc2c, #00ced1)
}
.userBanner.gs::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.ga {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}
.userBanner.ga::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.zga {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}
.userBanner.zga::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.ryk {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #8b006d, #f00)
}
.userBanner.ryk::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.razrab {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #f819a7, #4619f8)
}
.userBanner.razrab::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.super {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
}
.userBanner.super::before {
content: '';
display: block;
width: 18px;
height: 18px;
margin-right: 5px;
background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
@keyframes AnimBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}