Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » Визуальное оформление опросов [CSS трюки]


Визуальное оформление опросов [CSS трюки]

Сообщений 1 страница 6 из 6

1

Визуальное оформление опросов

Как-то я тут уже давал скрипт визуального оформления опросов, теперь тоже самое только без использования javascript,
применяем только css, что естественно предпочтительнее, поскольку надёжнее

http://uploads.ru/t/v/3/L/v3Lei.png

алгоритм работы прост
каждая строка с результатами в голосовании имеет ширину в процентах, на неё опираться и будем

#poll-special .poll2 td h1[style*='width:15%'] {background-color: #FF0000;}

можно расписать буквально для каждого процента и составить градацию как будет меняться цвет строки от процента к проценту, но как человек ленивый пошёл упрощённым путём и опираюсь только на первую цифру в параметре ширина и их получается 1-9,
если кто-то распишет более подробный вариант, логичный и приятный для глаза,
лично наставлю ему кучу плюсов ;)

Код:
<style type="text/css">
#poll-special .poll2 td h1[style*='width:'] {background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border-radius: 11px; -webkit-border-radius: 11px; -khtml-border-radius: 11px; -moz-border-radius: 11px; -o-border-radius: 11px;
box-shadow: 5px 5px 5px #9C9C9C; -moz-box-shadow: 5px 5px 5px #9C9C9C; -webkit-box-shadow: 5px 5px 5px #9C9C9C; filter: progid:DXImageTransform.Microsoft.Shadow(color='#9C9C9C', direction=145, strength=7); 
padding: 1px;margin: 0 50px;}
#poll-special .poll2 td h1[style*='width:1'] {background-color: #8A2BE2;}
#poll-special .poll2 td h1[style*='width:2'] {background-color: #4682B4;}
#poll-special .poll2 td h1[style*='width:3'] {background-color: #63B8FF;}
#poll-special .poll2 td h1[style*='width:4'] {background-color: #4EEE94;}
#poll-special .poll2 td h1[style*='width:5'] {background-color: #00EE00;}
#poll-special .poll2 td h1[style*='width:6'] {background-color: #C0FF3E;}
#poll-special .poll2 td h1[style*='width:7'] {background-color: #EEC900;}
#poll-special .poll2 td h1[style*='width:8'] {background-color: #FF8C00;}
#poll-special .poll2 td h1[style*='width:9'] {background-color: #FF4500;}
#poll-special .poll2 td h1[style*='width:100%'] {background-color: #FF0000;}
</style>

0

2

Romych
Вывод Опросов на Главной

0

3

Deff написал(а):

Romych
Вывод Опросов на Главной

это ты к чему?
я видел твою тему, или ты хочешь сказать, что у тебя каждая строка результата тоже имеет свой цвет в скрипте?

0

4

Romych
Неть  - а) Реклама б) Твоя идея может быть использована и тут

0

5

Один вопрос: данный код куда нужно вставлять? Просто ни разу с ксс не работал, помогите уж, новичку)))

0

6

Felix Braun
Администрирование - Настройки - Html-верх

0


Вы здесь » Единый форум поддержки » Архив » Визуальное оформление опросов [CSS трюки]