- 134
- 21
Доброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель
Здесь пишем "vlad" И так проделать со всеми баннерами.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель
Здесь пишем "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%;
}
}
Слишком много спойлеров
Как выглядят префиксы:
P.S На видео использован плагин Multiple Prefix
Команда проекта не показал т.к забыл ее включил в настройках форумаДоброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель
Здесь пишем "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%; } }
Слишком много спойлеров
Как выглядят префиксы:
Если будут какие-то вопросы можете задавать в комменты
P.S На видео использован плагин Multiple Prefix
Последнее редактирование: