Пользователь
- Регистрация
- 20 Фев 2025
- Сообщения
- 55
- Автор темы
- #1
3.1. Заголовок темы должен отражать основную суть темы.
Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.
Зарегистрироваться!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%);
-RP баннеры групп с логотипом
Моя вариация баннеров на CSS без фотошопа. Во-первых, структура кода сохраняет синтаксис LESS для лучшей работы и удобности. Во-вторых, чистый CSS и не нужно каждый раз закидывать баннер в фотошоп что бы отредактировать логотип или название...pawno-help.ru
иконка: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%);
что "-"?
Щас найду стиль, и посмотрю там лесс, если будет, скину))Kolpak
pawno-help.ru
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local(''),url('/styles/role-play/fonts/montserrat-400.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-400.woff') format('woff')
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: local(''),url('/styles/role-play/fonts/montserrat-500.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-500.woff') format('woff')
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: local(''),url('/styles/role-play/fonts/montserrat-600.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-600.woff') format('woff')
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local(''),url('/styles/role-play/fonts/montserrat-700.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-700.woff') format('woff')
}
.userBanner {
text-transform: uppercase;
font-weight: 800;
padding: 4px 6px 4px 4px;
border: 1px solid transparent;
border-radius: 11px;
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 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)
}
.message-userBanner.userBanner {
display: flex
}
@media (max-width: 750px) {
.message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner {
display:inline-flex
}
}
.userBanner.userBanner--staff {
color: #fff;
background-color: #5c97bf;
border: none;
background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
background-size: 900% 900%
}
.userBanner.userBanner--staff .userBanner-before: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.userBanner--admin {
color: #fff;
background-color: #7fff00;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--admin .userBanner-before: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.userBanner--stadm {
color: #fff;
background-color: #32cd32;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--stadm .userBanner-before: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.userBanner--mladm {
color: #fff;
background-color: #0f0;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--mladm .userBanner-before: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.userBanner--newmember {
color: #fff;
background-color: #6c7a89;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--newmember .userBanner-before: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.userBanner--verified {
color: #fff;
background-color: #446cb3;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--verified .userBanner-before: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.userBanner--proveren {
color: #fff;
background-color: #3c7a9c;
border: none;
background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}
.userBanner.userBanner--proveren .userBanner-before: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.userBanner--hassle {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
}
.userBanner.userBanner--hassle .userBanner-before: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.userBanner--black {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
}
.userBanner.userBanner--black .userBanner-before: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.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.userBanner--sponsor .userBanner-before: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.userBanner--osnov {
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.userBanner--osnov .userBanner-before: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.userBanner--tehh {
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.userBanner--tehh .userBanner-before: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.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.userBanner--user .userBanner-before: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.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.userBanner--proh .userBanner-before: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.userBanner--remka {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-color: #009c82
}
.userBanner.userBanner--remka .userBanner-before: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.userBanner--kur {
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.userBanner--kur .userBanner-before: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.userBanner--adm {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
}
.userBanner.userBanner--adm .userBanner-before: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.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, #b50, #c00)
}
.userBanner.userBanner--teh .userBanner-before: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.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.userBanner--lider .userBanner-before: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.userBanner--soskazgs {
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.userBanner--soskazgs .userBanner-before: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.userBanner--soskags {
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.userBanner--soskags .userBanner-before: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.userBanner--Gladmin {
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.userBanner--Gladmin .userBanner-before: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.userBanner--ZGadmin {
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.userBanner--ZGadmin .userBanner-before: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.userBanner--admforum {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #0ff, #008080, #0ff)
}
.userBanner.userBanner--admforum .userBanner-before: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.userBanner--rykproekta {
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.userBanner--rykproekta .userBanner-before: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.userBanner--redadmin {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
}
.userBanner.userBanner--redadmin .userBanner-before: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.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.userBanner--razrab .userBanner-before: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.userBanner--admforum {
color: #fff;
background-color: #d80000;
border: none;
background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
background-image: linear-gradient(270deg, #7900ff, #8b00ff)
}
.userBanner.userBanner--admforum .userBanner-before: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.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.userBanner--super .userBanner-before: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%
}
@keyframes AnimBanner {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
}