CoolPoll v. 1.0.3 - Красивые результаты опроса CSS3

Данный подфорум будет интересен веб-дизайнерам и администраторам форумов. Подфорум посвящен модификациям форума phpBB3. Здесь обсуждаются моды, расширения, хаки и скрипты для phpBB3 и phpBB 3.1.x.
Правила форума
Местная Конституция | FAQ - Часто задаваемые вопросы | Для новичков! | Реклама на форуме! | Публикация сообщений | Как вставить картинку или файл

Помните, поблагодарить автора за интересное сообщение, вы можете - нажав Изображение или повысить его репутацию - нажав Изображение в сообщении.
Прежде чем задать вопрос, воспользуйтесь поиском - возможно, что такая тема уже есть на форуме. За нарушение правил Ваш вопрос может быть удален без объяснения причин!
Картинки не открываются? Значит у Вас нет прав доступа. (Только для зарегистрированных пользователей, членов клуба и VIP-пользователей). Как вступить в "Клуб электриков" и стать VIP-пользователем?
Аватара пользователя
elhouse
Автор темы
Russia
Председатель клуба
Председатель клуба
Генеральный директор
Генеральный директор

CoolPoll v. 1.0.3 - Красивые результаты опроса CSS3

Сообщение #1 elhouse » 03 авг 2013, 08:44

CoolPoll v. 1.0.3
Результаты опроса с красивой цветной анимацией.
Работает на всех современных браузерах.

Цвета:
0-19% - синий
20-39% - зеленый
40-59% - желтый
60-79% - оранжевый
80-100% - красный

styles/prosilver/template/viewtopic_body.html

Найти:

Код: Выделить всё

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar">


Заменить на:

Код: Выделить всё

<!-- IF S_DISPLAY_RESULTS --><dd class="resultbar"><div class="meter">


Найти:

Код: Выделить всё

{poll_option.POLL_OPTION_RESULT}</div></dd>


Заменить на:

Код: Выделить всё

{poll_option.POLL_OPTION_RESULT}&nbsp;</div></div></dd>


styles/prosilver/theme/colours.css

Найти:

Код: Выделить всё

.rtl .pollbar5 {
   border-left-color: #D11A4E;
}


Добавить после:

Код: Выделить всё

/* CoolPoll ()
-----------------------------v.1.0.3--- */

.pollbar1 {
   background-color: #4069D1; /* blue */
   background-image: linear-gradient(
   135deg, rgba(0, 0, 128, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(0, 0, 128, 0.2) 50%,
   rgba(0, 0, 128, 0.2) 75%,
   transparent 75%,
   transparent);
}

.pollbar2 {
   background-color: #2BC253; /* green */
   background-image: linear-gradient(
   135deg,
   rgba(84, 240, 84, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(84, 240, 84, 0.2) 50%,
   rgba(84, 240, 84, 0.2) 75%,
   transparent 75%,
   transparent);
}

.pollbar3 {
   background-color: #FFD800; /* yellow */
   background-image: linear-gradient(
   135deg,
   rgba(216, 177, 0, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(216, 177, 0, 0.2) 50%,
   rgba(216, 177, 0, 0.2) 75%,
   transparent 75%,
   transparent);
}

.pollbar4 {
   background-color: #f1a165; /* orange */
   background-image: linear-gradient(
   135deg,
   rgba(243, 109, 10, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(243, 109, 10, 0.2) 50%,
   rgba(243, 109, 10, 0.2) 75%,
   transparent 75%,
   transparent);
}

.pollbar5 {
   background-color: #f0a3a3; /* red */
   background-image: linear-gradient(
   135deg, rgba(244, 35, 35, 0.2) 25%,
   transparent 25%,
   transparent 50%,
   rgba(244, 35, 35, 0.2) 50%,
   rgba(244, 35, 35, 0.2) 75%,
   transparent 75%,
   transparent);
}

@keyframes move {
  from { background-position: 0 0; }
  to   { background-position: 100px 50px; }
}

@-webkit-keyframes move {
   0% {background-position: 0 0;}
   100% {background-position: 100px 50px;}
}

.meter {
   background-color: #E0E3E0;
   height: 15px;
   padding: 1px !important;
   margin: 0;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
   -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
   box-shadow: 0 1px 5px #000 inset, 0 1px 0px #fff;
}

.meter > div {
   position: relative;
   height: 100%;
   padding: 0 !important;
   border: none;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
   box-shadow:
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);
   overflow: hidden;
    animation: move 3s linear 0s normal none infinite ;
   -webkit-animation: move 3s linear infinite;
   background-size: 50px 50px;
}


Выглядит вот так:



Сделано на основе Smayliks (Для просмотра ссылки необходимо зарегистрироваться!) и Татьяна5.
Electric House - интернет-магазин электрооборудования.
Filling-Shop - интернет магазин, сервис сравнения цен.
Все тематические вопросы и ответы на них, только на форуме! В личку по электрике не отвечаю.

CoolPoll v. 1.0.3 - Красивые результаты опроса CSS3

Сообщение #1  Похожие темы » 03 авг 2013, 08:44

Посмотрите здесь:
Отображение типа темы в списке тем на CSS3 для phpBB3
Вопросы и ответы по электрике


Рекомендуем

 Лучшие предложения »

Вернуться в «Расширения и моды phpBB3 и phpBB 3.1.x»

  • Товары по теме

Сравнение цен

  • Смотрите также

Это интересно

Лидеры продаж


Стабилизатор напряжения Энергия Hybrid-8000(U) Энергия Hybrid-8000(U)
Стабилизатор напряжения


Новая модель гибридного стабилизатора с плавной регулировкой напряжения и расширенным диапазоном входных напряжений, отличные характеристики и много новых функций. Идеально для коттеджа и дачи.

Стабилизатор напряжения Штиль ИнСтаб IS1000 Штиль ИнСтаб IS1000
Стабилизатор напряжения


Инверторный стабилизатор напряжения с широким диапазоном напряжений, обладающий высокой точностью, обеспечивает абсолютную защиту от скачков и просадок напряжения. Для защиты ответственного оборудования.

Инвертор Энергия ИБП Гарант-1000 Энергия ИБП Гарант-1000
Инвертор


ИБП используется для защиты газовых котлов, автоматики распашных, откатных и подъёмных ворот, а так же для бесперебойного питания в случаях отключения электричества. Идеально для коттеджа и дачи.

Перейти в интернет-магазин электрооборудования «Electric House»

Кто на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость

Права доступа

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения