CSS [Arizona-RP] Два вида баннеров для форума

[Weshnovsky]

Короче, решил слить два вида баннеров всех групп + код.
Думаю было уже много тем по поводу баннеров, но планирую еще обновлять тему.
Баннеры сделаны для Нубо-РП.

Спойлер: Баннеры первый вид

Owner: https://svgshare.com/i/12jL.svg
Dep-Owner: https://svgshare.com/i/12gG.svg
Manager: https://svgshare.com/i/12io.svg
Spec-Adm: https://svgshare.com/i/12jm.svg
GA: https://svgshare.com/i/12jn.svg
ZGA: https://svgshare.com/i/12i5.svg
Curator: https://svgshare.com/i/12jo.svg
GL-Spectator: https://svgshare.com/i/12jW.svg
ZGL-Spectator: https://svgshare.com/i/12jp.svg
GOS-Spectator: https://svgshare.com/i/12hZ.svg
Nelegal-Spectator: https://svgshare.com/i/12ip.svg
OPR-Spectator: https://svgshare.com/i/12jx.svg
Admin: https://svgshare.com/i/12iU.svg
Moderator: https://svgshare.com/i/12jy.svg
ML-Moderator: https://svgshare.com/i/12k8.svg
Tex-Admin: https://svgshare.com/i/12je.svg
User: https://svgshare.com/i/12k9.svg
Team-Project: https://svgshare.com/i/12jX.svg
Spec-Account: https://svgshare.com/i/12jf.svg

Как по мне очень хорошие баннеры, теперь перейдем к другим.

Спойлер: Баннеры второй вид

Owner: https://svgshare.com/i/12kA.svg
Osnovatel: https://svgshare.com/i/12gS.svg
Dev: https://svgshare.com/i/12ia.svg
GA: https://svgshare.com/i/12jq.svg
ZGA: https://svgshare.com/i/12kC.svg
Admin-Forum: https://svgshare.com/i/12jY.svg
Admin: https://svgshare.com/i/12j9.svg
Curator: https://svgshare.com/i/12iq.svg
Ghetto-Spectator: https://svgshare.com/i/12i6.svg
GOS-Spectator: https://svgshare.com/i/12jZ.svg
Helper: https://svgshare.com/i/12jg.svg
ML-Admin: https://svgshare.com/i/12jr.svg
Opr-Spectator: https://svgshare.com/i/12kB.svg
Spec-Admin: https://svgshare.com/i/12jM.svg
Tex-Admin: https://svgshare.com/i/12iB.svg
User: https://svgshare.com/i/12iC.svg

Вторые баннеры тоже вроде как нормальные, теперь перейдем к коду.
Сразу говорю код отлично подходит к первым баннерам, но если поиграться с width & height то и вторые баннеры встанут.

Спойлер: Код для баннеров

.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    width: 150px;
    height: 35px;
    font-size: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: none;
    display: block;
}
.Name {
    background: url(url);
    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%;
}
}

Вот вроде и все, так-же там где подсвечиваются, Name и url(но в дужках), Name пишите любое название баннера, в url вставляете ссылку на баннер.
Если будут вопросы или ошибки то пишите!​

 

[overstalinist]

пр от сталиниста топчек

 

[skrrt]

пр от сталиниста топчек

нубас

 

[overstalinist]

нубас

aileshev di naxui

 

[cute_filatov]

ну вообщем, очередная тема для особо глупых которые не могут пользоваться девтулсом

 

[Weshnovsky]

ну вообщем, очередная тема для особо глупых которые не могут пользоваться девтулсом

ну ок

 

[mayakov.]

не работает, кинь на i.postimg.cc

 

[Weshnovsky]

не работает, кинь на i.postimg.cc

Что именно не работает?

 

[mayakov.]

Что именно не работает?

уже все решил, спасибо