Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » CSS Сниппеты » Дизайн рейтинга (тип 3) на чистом css3

Дизайн рейтинга (тип 3) на чистом css3


     01.03.2015    рейтинг    CSS Сниппеты    3033

Дизайн рейтинга (тип 3) на чистом css3

От делать нечего решил оформить рейтинг (тип 3 в dle) на чистом CSS3 без использования изображений.
В итоге получилось то, что на скрине выше, решил выложить сюда. Заняло 15 минут времени.

HTML:
[rating-type-3]
<div class="mwrating" style="margin: 10px 0px 0px 0px;">
    <div class="wmminus">[rating-minus]-[/rating-minus]</div>
    <div class="mwrat">{rating}</div>
    <div class="wmplus">[rating-plus]+[/rating-plus]</div>
</div>
[/rating-type-3]


CSS:
/*----new raring 3-----*/

.mwrating {
    display: inline-block;
    width: 96px;
    height: 28px;
}

.wmminus, .wmplus {
    width: 22px;
    height: 28px;
}

.mwrat {
    width: 42px;
    height: 28px;
}

.wmminus, .mwrat, .wmplus {
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 28px;
    position: relative;
}

.wmminus a {
    transition: all 0.2s;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 1px solid #D60A07;
    border-right: 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);
    font-family: 'Tahoma';
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.62);
}

.wmplus a {
    transition: all 0.2s;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: linear-gradient(to bottom, #97d624 0%,#7cbc0a 100%);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #7EBE0C;
    border-left: 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);
    font-family: 'Tahoma';
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.33);
}

.wmminus a:hover, .wmplus a:hover {
    text-decoration: none;
    text-shadow: 0px 0px 5px #fff;
}

.wmminus a:active, .wmplus a:active {
    opacity: 0.5;
}

.mwrat {
    background: linear-gradient(to bottom, #F0F0F0 0%,#D5D5D5 100%);
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #C3C3C3;
    box-shadow: inset 0px 1px 0px #fff;
    font-family: 'Arial';
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0px 1px 1px #fff;
}
Демо

7 комментариев

ПафНутиЙ
Админ

ПафНутиЙ - 1 марта 2015 23:09 -

Неплохой сниппет, добавил демку (чистая вёрстка, не DLE)

Каков вопрос - таков и ответ. Просто помните об этом.

shamanim
Юзер

shamanim - 2 марта 2015 01:23 -

рейтинг целсофт конечно добавил, после многих лет сторонних модулей, но как то на отвали сделал, любые печеньки по его доработке радуют

D0Gmatist
Местный

D0Gmatist - 2 марта 2015 02:40 -

Сделал.. слизал то что люди делают и вставил в DLE как в прочем и всё что вставлено в всех последних версиях, даже дизайн админки и тот на стороне заказан и зажал бабла на нормальный...
Ну не мне судить автора DLE, за хорошо продаваемый и популярный плагиат 80% сторонних модулей плагинов и плюшек )))
А ну единственное... труд собрать это всё во едино что бы работало .. но и тут дыр горы..
Одно только то что нет цыкла в шаблонизаторе досихпор .. просто поражает .. к примеру
{IF:REVIEW_BAD}
    есть
{ELSE:REVIEW_BAD}
    нету
{ENDIF:REVIEW_BAD}

{CASE:REVIEW}
    123123
{ENDCASE:REVIEW}

Такая проблема придумать?
Могу поделиться шаблонизатором

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

werty1001
Юзер

werty1001 - 2 марта 2015 03:32 -

Цитата: D0Gmatist
Такая проблема придумать?

Я так понимаю профит с движка маленький отсюда и отношение.

Цитата: shamanim
рейтинг целсофт конечно добавил, после многих лет сторонних модулей, но как то на отвали сделал

Это точно, даже себя лайкать можно, теперь пару версий будет это допиливать.

shamanim
Юзер

shamanim - 2 марта 2015 04:03 -

да нормально они зарабатывают, особенно после того как начали рассылать письма счастья хостерам, да я лично посадил на дле сайтов 50, от магазинов до обычных сайтов визиток, пускай даже половина из них купила лицензию, 25 x 50 = 1250$. Для себя 4 лицензии взял.

В принципе отношение нормальное, по сравнению с остальными движками, этот самый простой, оптимизированный, функциональный. Тот же вордпресс казуальное гавно, такие движки как лайфстрит довольно сложны, сайты на них у меня получаються в полтора раза дольше, по моему ДЛЕ это самый сок.

Просто рейтинг могли сделать лучше, более отзывчивым.

onneuha
Юзер

onneuha - 2 марта 2015 09:24 -

Админ, не могу найти как тему отредактировать. Убери пожалуйста
style="margin: 10px 0px 0px 0px;"
, я его забыл удалить перед тем, как сюда опубликовать.

Alien Brickman
Юзер

Alien Brickman - 22 октября 2016 22:57 -

Спасибо!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх