css ELO-skill

[Sonyx]

Может кому то из разработчиков пригодится, готовая таблица стилей, для генерации значков скила.
Особенности: никаких фоновых картинок, минимальное кол-во тегов в документе (для вывода в Motd это критично же).
Заливку можно заменить градиентом при желании, просто не стал делать.
В HTML скил заключаем просто в тег с нужным классом.
Пример:
<div class="skill skill-130">137</div>
skill-*** - минимальный порог скила (0, 60, 75 и т.д.)
на выходе имеем:

если уровень скила не задан, или задан не верно:

.skill {
    background-color: #fff;
    width: 48px;
    height: 16px;
    text-align: center;
    border-radius: 5px;
    color: #000;
    font-size: 8pt;
    font-weight:bold;
    line-height: 16px;  }
.skill:before {
    content: '?';
    text-align: center;
    line-height: 16px;
    color: #000;
    background: #ddd;
    float: left;
    position: relative;
    top: 0px;
    border-radius: 4px;
    display: block;
    font-size: 8pt;
    font-weight:bold;
    height: 16px;
    width: 23px;   }
.skill-0:before {
    content: 'L-';
    background: #FCE590;   }
.skill-60:before {
    content: 'L';
    background: #FCE590;   }
.skill-75:before {
    content: 'L+';
    background: #FCE590;   }
.skill-85:before {
    content: 'M-';
    background: #FFC900;   }
.skill-100:before {
    content: 'M';
    background: #FFC900;   }
.skill-115:before {
    content: 'M+';
    background: #FFC900;   }
.skill-130:before {
    content: 'H-';
    background: #F2880F;   }
.skill-140:before {
    content: 'H';
    background: #F2880F;   }
.skill-150:before {
    content: 'H+';
    background: #F2880F;    }
.skill-165:before {
    content: 'P-';
    background: #FF3333;
    color: #FFF;    }
.skill-180:before {
    content: 'P';
    background: #FF3333;
    color: #FFF;    }
.skill-195:before {
    content: 'P+';
    background: #FF3333;
    color: #FFF;   }
.skill-210:before {
    content: 'G';
    background: #000;
    color: #FFF;   }

 

[d3m37r4]

Получилось сэмулировать псевдоэлементы для ie6, затестю в кс, если всё норм, закину сюда, можно будет закрепить в теме)

24 Ноя 2017

Потерпел я фиаско с псевдоэлементами. В IETester норм они эмулировались на 6-9 версиях, но в кс ничего не работало, видимо реально обрезок юзается в 4xxx билдах клиента.
Как вариант, для серверов, можно это зюзать:

Спойлер: Код CSS

div{background:#fff;width:50px;height:16px;text-align:center;color:#000;font-size:10px;font-weight:bold;line-height:16px;padding-right:2px}

span{display:block;float:left;position:relative;width:22px}

.s0,.s60,.s75{background:#FCE590}

.s85,.s100,.s115{background:#FFC900}

.s130,.s140,.s150{background:#F2880F}

.s165,.s180,.s195{background:#FF0000;color:#FFF}

.s210{background:#000;color:#FFF}

Пример вывода:

<div><span class=s140>H</span>140</div>

Спойлер: В итоге будем иметь что-то типа этого

Немного костыльно, но за то не используем картинки при загрузке скилла:)