CF- Сообщения
- 203
- Реакции
- 128
CSS:
@keyframes normativeAnim {
0% { background-position: 0% 50% }
50% { background-position: 100% 50% }
100% { background-position: 0% 50% }
}
.userBanner {
text-transform: uppercase;
font-weight: 800;
padding: 4px 6px 4px 4px;
border: 1px solid transparent;
border-radius: 11px;
text-align: center;
width: 100%;
display: inline-flex !important;
justify-content: space-between;
background-size: 500% 500%;
animation: normativeAnim 10s ease infinite;
align-items: center;
align-content: center;
position: relative;
strong {
font-size: 85%;
font-family: 'Montserrat',sans-serif;
font-weight: 800;
padding-left: 3px;
line-height: .95;
text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5);
}
&:before {
content: '';
display: block;
width: 18px;
height: 18px;
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--staff {
color: #fff;
background-color: #5c97bf;
background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
background-size: 900% 900% !important;
}
&.admin {
color: #fff;
background-color: #7fff00;
background-image: linear-gradient(to right, transparent 0%, transparent 100%);
}
&.stadm {
color: #fff;
background-color: #32cd32;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
&.mladm {
color: #fff;
background-color: #0f0;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
&.newmember {
color: #fff;
background-color: #6c7a89;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
&.verified {
color: #fff;
background-color: #446cb3;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
&.proveren {
color: #fff;
background-color: #3c7a9c;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
&.hassle {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
}
&.black {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
}
&.sponsor {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}
&.osnov {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}
&.tehh {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #ff4500, #b0284d)
}
&.user {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #bcbbbb, #515151)
}
&.proh {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}
&.remka {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-color: #009c82
}
&.kur {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}
&.adm {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
}
&.teh {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
}
&.lider {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #da0, #f08b9a)
}
&.soskazgs {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #06f, #ba55d3)
}
&.Gladmin {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}
&.ZGadmin {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}
&.rykproekta {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #8b006d, #f00)
}
&.redadmin {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
}
&.razrab {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #f819a7, #4619f8)
}
&.admforum {
color: #fff;
background-color: #d80000;
background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
background-image: linear-gradient(270deg, #7900ff, #8b00ff)
}
&.super {
color: #fff;
background-color: #d80000;
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 admin ну и подставляем свои значения
