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

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


     01.03.2015    CSS Сниппеты    2445

Дизайн рейтинга (тип 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)

ПафНутиЙ
1064

3393 | 2433

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

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

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

shamanim
1

166 | 30

shamanim - 2 марта 2015 01:23 - Юзер

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

D0Gmatist
225

794 | 281

D0Gmatist - 2 марта 2015 02:40 - Местный

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

{CASE:REVIEW}
    123123
{ENDCASE:REVIEW}

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

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

werty1001
18

56 | 30

werty1001 - 2 марта 2015 03:32 - Юзер

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

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

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

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

shamanim
1

166 | 30

shamanim - 2 марта 2015 04:03 - Юзер

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

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

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

onneuha
4

33 | 5

onneuha - 2 марта 2015 09:24 - Юзер

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

Alien Brickman
5

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

Спасибо!

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