CSS [Arizona RP] Баннеры всех групп + префиксы тем

Лера первоклассница

Лера первоклассница

Участник
Автор темы
126
21
Доброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель
1678439092663.png

Здесь пишем "vlad" И так проделать со всеми баннерами.


​
123: 
.vlad {
    background: url(https://svgshare.com/i/qgp.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.ga {
    background: url(https://robo-hamster.ru/foreme/ga.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zga {
    background: url(https://robo-hamster.ru/foreme/zga.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.curator {
    background: url(https://robo-hamster.ru/foreme/cur.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.adminka {
    background: url(https://robo-hamster.ru/foreme/adm.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.admin {
    background: url(https://robo-hamster.ru/foreme/mla.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.helper {
    background: url(https://robo-hamster.ru/foreme/help.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.user {
    background: url(https://robo-hamster.ru/foreme/user.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.userBanner.userBanner--staff {
    background: url(https://svgshare.com/i/mij.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: inline-flex;
}
.zgsnele {
    background: url(https://svgshare.com/i/r1M.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gsnele {
    background: url(https://svgshare.com/i/r11.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zgsletov {
    background: url(https://svgshare.com/i/r0e.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gssletov {
    background: url(https://svgshare.com/i/r0C.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.tech {
    background: url(https://svgshare.com/i/qgw.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zgsgoss {
    background: url(https://svgshare.com/i/r1A.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gs {
    background: url(https://i.imgur.com/r6fAIkD.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.rukvo {
    background: url(https://i.imgur.com/3Zf9nlA.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.sletov {
    background: url(https://i.imgur.com/Vs1zQ1L.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gsgoss {
    background: url(https://svgshare.com/i/r01.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}

.blue {
box-shadow: 0px 0px 16px blue;
color: #fff;
background-color: blue;
border-color: blue;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.gray {
box-shadow: 0px 0px 16px gray;
color: #fff;
background-color: gray;
border-color: gray;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.yellow {
box-shadow: 0px 0px 16px #fde910;
color: #fff;
background-color: #fde910;
border-color: #fde910;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.green {
box-shadow: 0px 0px 16px green;
color: #fff;
background-color: green;
border-color: green;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.red {
box-shadow: 0px 0px 16px red;
color: #fff;
background-color: red;
border-color: red;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

@keyframes animate-shine {
0% {
opacity: .1;
width: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
width: 100%;
}
}
​

1678439308359.png

Слишком много спойлеров

Как выглядят префиксы:
Если будут какие-то вопросы можете задавать в комменты
P.S На видео использован плагин Multiple Prefix​

Лера первоклассница написал(а):
Доброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель
1678439092663.png

Здесь пишем "vlad" И так проделать со всеми баннерами.


​
123: 
.vlad {
    background: url(https://svgshare.com/i/qgp.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.ga {
    background: url(https://robo-hamster.ru/foreme/ga.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zga {
    background: url(https://robo-hamster.ru/foreme/zga.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.curator {
    background: url(https://robo-hamster.ru/foreme/cur.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.adminka {
    background: url(https://robo-hamster.ru/foreme/adm.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.admin {
    background: url(https://robo-hamster.ru/foreme/mla.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.helper {
    background: url(https://robo-hamster.ru/foreme/help.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.user {
    background: url(https://robo-hamster.ru/foreme/user.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.userBanner.userBanner--staff {
    background: url(https://svgshare.com/i/mij.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: inline-flex;
}
.zgsnele {
    background: url(https://svgshare.com/i/r1M.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gsnele {
    background: url(https://svgshare.com/i/r11.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zgsletov {
    background: url(https://svgshare.com/i/r0e.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gssletov {
    background: url(https://svgshare.com/i/r0C.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.tech {
    background: url(https://svgshare.com/i/qgw.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.zgsgoss {
    background: url(https://svgshare.com/i/r1A.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gs {
    background: url(https://i.imgur.com/r6fAIkD.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.rukvo {
    background: url(https://i.imgur.com/3Zf9nlA.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.sletov {
    background: url(https://i.imgur.com/Vs1zQ1L.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.gsgoss {
    background: url(https://svgshare.com/i/r01.svg);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}

.blue {
box-shadow: 0px 0px 16px blue;
color: #fff;
background-color: blue;
border-color: blue;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.gray {
box-shadow: 0px 0px 16px gray;
color: #fff;
background-color: gray;
border-color: gray;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.yellow {
box-shadow: 0px 0px 16px #fde910;
color: #fff;
background-color: #fde910;
border-color: #fde910;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

.green {
box-shadow: 0px 0px 16px green;
color: #fff;
background-color: green;
border-color: green;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.red {
box-shadow: 0px 0px 16px red;
color: #fff;
background-color: red;
border-color: red;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}

@keyframes animate-shine {
0% {
opacity: .1;
width: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
width: 100%;
}
}
​

1678439308359.png

Слишком много спойлеров

Как выглядят префиксы:
Если будут какие-то вопросы можете задавать в комменты
P.S На видео использован плагин Multiple Prefix​
Нажмите для раскрытия...
Команда проекта не показал т.к забыл ее включил в настройках форума
 
Последнее редактирование:
  • Нравится
Реакции: danduk_oil и moonya1231
Лера первоклассница

Лера первоклассница

Участник
Автор темы
126
21
kelliga написал(а):
Никак, это просто доп. баннеры для форума арз


Зачем? Думаешь кому то это надо? Если они этого не сделали, значит не нужно.
Нажмите для раскрытия...
Сделал для бонусных серверов, я же не такой уж и популярный чтобы делать что-то для основы арз
 
Foxy1e3t

Foxy1e3t

Известный
45
61
Лера первоклассница написал(а):
.vlad { background: url(https://svgshare.com/i/qgp.svg); width: 150px; height: 35px; font-size: 0px; background-repeat: no-repeat; background-position: center; background-size: cover; border: none; display: block;
Нажмите для раскрытия...
зачем так?
.userBanner {
сюда всё что надо по типу
width: 150px; height: 35px
Нажмите для раскрытия...
}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
 
Лера первоклассница

Лера первоклассница

Участник
Автор темы
126
21
Foxy1e3t написал(а):
зачем так?
.userBanner {
сюда всё что надо по типу

}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
Нажмите для раскрытия...
ну за мою историю, svgshare ниразу не падал
на всех форумах есть согласие на cookie файлы, должны же загружены

alexey lebedev написал(а):
можешь плиз дать ссылку на .svg с префиксом"администрация"('это баннер, который после владельца идет)
Нажмите для раскрытия...
найди сам емае


ввв: 
.rukvo {
    background: url(https://i.imgur.com/3Zf9nlA.png);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}

Foxy1e3t написал(а):
зачем так?
.userBanner {
сюда всё что надо по типу

}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
Нажмите для раскрытия...
да и плюсом мне было лень их загружать на сайт форума
 
Лера первоклассница

Лера первоклассница

Участник
Автор темы
126
21
nitarav написал(а):
Не работает баннер "Куратор"
Нажмите для раскрытия...
потому что он на робо хомячке, а сам робо хомячок помер, тебе там челик скинул другую версию

а хотя не помер, но сайт где находится сама ссылка на куратора померла
 
N

nitarav

Участник
50
9
Лера первоклассница написал(а):
потому что он на робо хомячке, а сам робо хомячок помер, тебе там челик скинул другую версию

а хотя не помер, но сайт где находится сама ссылка на куратора померла
Нажмите для раскрытия...
Приветули, нашел куча дургих баннеров по типу блата.нет владелец и тд
 
  • Ха-ха
Реакции: Лера первоклассница и mihagrom
Войдите или зарегистрируйтесь для ответа.

Похожие темы

  1. junior_l
    Информация [ARZ-Forum] Баннеры всех групп (v3)
      • Нравится
      • Ха-ха
      • Bug
    Ответы
    41
    Просмотры
    3K
    Web-разработка
    cute_filatov
    cute_filatov
  2. Типа пон
    [ARZ-Games] Баннеры всех групп (v2)
    Ответы
    77
    Просмотры
    6K
    Web-разработка
    cute_filatov
    cute_filatov
  3. Wexmover
    CSS [Arizona RP] Переливающиеся Баннеры всех групп пользователей + префиксы тем
    Ответы
    6
    Просмотры
    2K
    Web-разработка
    Лера первоклассница
    Лера первоклассница
  4. Weshnovsky
    CSS [Arizona-RP] Два вида баннеров для форума
      • Bug
    Ответы
    8
    Просмотры
    1K
    Web-разработка
    mayakov.
    M
  5. Noah Krarup
    Гайд Баннеры групп для форумов SA:MP
      • Нравится
    Ответы
    0
    Просмотры
    2K
    Web-разработка
    Noah Krarup
    Noah Krarup
Сверху Снизу