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

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

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

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

Сообщение 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 (http://www.electric-house.ru)
-----------------------------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». Стабилизаторы напряжения, инверторы, ИБП, аккумуляторы. Voltron, Voltron 3D, Энергия, Энергия Classic/Ultra.
Все тематические вопросы и ответы на них, только на форуме! В личку по электрике не отвечаю.

Стабилизатор напряжения - Энергия СНВТ-10000/1 Hybrid
Энергия СНВТ-10000/1 Hybrid
Стабилизатор напряжения


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

20.900 руб.

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

Сообщение Объявления » 03 авг 2013, 08:44

Стабилизатор напряжения - Энергия Люкс-1000
Энергия Люкс-1000
Стабилизатор напряжения


Бытовой стабилизатор со встроенным фильтром сетевых помех. Защитит от скачков и просадок напряжения.

2.500 руб.

Рекомендуемый контент

 Ещё страницы сайта »

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

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

Кто на форуме

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