Создание оригинального рейтинга с помощью CSS

Итак, очень многие из вас знают, что такое блог. Все мы видели комментарии и обзоры на сайтах вроде Netflix и Amazon. Большинство этих обзоров оснащены удобными и красивыми рейтингами. Я также видел рейтинг со звездочками на msn.com. Вопрос, который я ставлю - можно ли создать рейтинг, используя только CSS? Я хочу сделать так, чтобы при наведении курсора на звездочку, закрашивалось столько звезд, сколько пользователь хочет присвоить. Т.е навели на третью звездочку - три звезды закрасилось. Чтож, я рад, что вы заинтересовались, т.к именно об этом я и собираюсь рассказывать.

Но! Прежде чем мы начнем давайте посмотрим к чему мы стремимся, собственно, вот здесь пример.

Шаг 1: XHTML

Прежде давайте разложим все по полочкам. Рейтинг - это всего лишь список ссылок, верно? Так что мы и создадим список ссылок. Ему мы присвоим класс "star-rating" и дадим ссылкам соответствующие классы и названия. Делаем… Вуаля!

<ul class='star-rating'>
<li><a href='#' title='Rate this 1 star out of 5? class='one-star'>1</a></li>
<li><a href='#' title='Rate this 2 stars out of 5? class='two-stars'>2</a></li>
<li><a href='#' title='Rate this 3 stars out of 5? class='three-stars'>3</a></li>
<li><a href='#' title='Rate this 4 stars out of 5? class='four-stars'>4</a></li>
<li><a href='#' title='Rate this 5 stars out of 5? class='five-stars'>5</a></li>
</ul>

В списке, который мы создали, href'ы должны по идее указывать на верную страницу. Кроме того, вы можете использовать AJAX чтобы назначать различные действия для каждой ссылки, но мы не будем это сейчас делать. Достаточно того, что мы просто указали им на корректную страницу, на которой наш рейтинг.

Шаг 2: Графика

Мы не продумали, как все это будет выглядеть. Я бы сделал это с помощью прозрачного PNG, но т.к злобный тупица с кучей денег сделал свой патентованный браузер с особым набором хитрющих правил, прозрачные PNG картинки не слишком хорошо себя ведут если их использовать для манипуляций с фоном в CSS, например для использования в background-position.

Поэтому мы будем работать с древним GIF. Итак, вот GIF картинка:

Шаг 3: CSS

Давайте пороемся внутри CSS. Во-первых, я всегда выделяю стилем самый старший элемент, в случае с UL, определяю его классом 'star-rating':

.star-rating{
list-style: none; отключение стандартных маркеров списка
margin: 3px; - Я хочу оставить немного места вокруг
padding: 0px; - Это сделано через одно место. Я знаю, что элемент OL имеет по умолчанию отступ в 0px, но мы все равно явно пропишем 0px, просто на всякий случай
width: 100px; - Это список из 5 звездочек, каждая в 20 px? Кроме того, они должны быть 5 x 20px = 100px в ширину
height: 20px; - Высота каждой звезды 20 px. Поскольку это горизонтальный список, мы установим высоту списка в высоту звезд.
position: relative; - Очень важно. Мы будем использовать абсолютное позиционирование позже. Мы хотим использовать относительно-точное позиционирование.
background: url(star_rating.gif) top left repeat-x; - Повторяя это изображение горизонтально мы получим 5 звезд в ряд. }

Итак, для каждого объекта с классом "star-rating" мы сделали следующее:

• удалили маркеры списка
• установили небольшой отступ
• удалили отступы у списка
• сделали весь список 100 пикселов в ширину и 20 в высоту

А для элементов списка, такой код css:

1.star-rating li{
padding:0px; - вовсе без отступа
margin:0px; - вовсе без полей
/*\*/ - "бэкслеш хак", заставляет IE5 Mac НЕ видеть это правило
float: left; - для любых других браузеров мы float left, это создаст нам горизонтальный список
/* */ - конец хака
}

Фактически, эта css устанавливает всем элементам внутри объекта, несмотря на класс "star-rating" быть горизонтальными, а не вертикальными. Этот хак называется backslash hack и делает float: left; правило невидимым для IE5 для Макинтош.

А для ссылок внутри элементов, пишем код:

.star-rating li a{
display:block; - мы хотим заблокировать элемент, так, чтобы управлять его высотой и шириной
width:20px; - простой метод, мы хотим чтобы ширина была такая же как ширина звезды
height: 20px; - то же самое что и ширина
text-decoration: none; - уберем подчеркивание ссылки
text-indent: -9000px; - уберем текст с экрана, используя image-replacement технологию
xz-index: 20; - к этому мы еще вернемся
position: absolute; - теперь мы можем контролировать точные координаты x и y каждой звезды относительно родительского UL
padding: 0px; - еще раз, нем не нужно никаких отступов
background-image:none; - мы не будем показывать звезду
}
.star-rating li a:hover{
background: url(star_rating.gif) left bottom; - вот оно где, все очарование
xz-index: 1; - помещаем эту звезду подниз слоев z-index
left: 0px; - помещаем звезду влево до самого края, выстраивая вряд со стороной родительского UL элемента
}

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

Что касается положения :hover - то это именно то место, где проявляется волшебство CSS. Когда пользователь наводит на нужный линк, этот линк помещает все в самый нижний слой z-index. Затем ссылка загружает фоновое изображение, но оно сдвинуто на 20 px вниз и теперь мы видим нашу расположенную выше картинку. Ссылка задвигается до конца влево.

Сейчас я знаю, что вы думаете. Вы думаете: "Погоди, если ссылка двигается влево до конца, тогда :hover закончится и тогда картинка со звездой исчезнет!" Чтож, вы правы и очень сообразительны. Но стоп! Мы же еще не закончили наш код CSS. Давайте взглянем изменят ли что-то оставшиеся правила CSS.

Кроме того, вы можете подумать, почему картинка повторяется горизонтальное, если ссылка все также в 20 пикселов? Почему используется даже правило repeat-x? Еще один хороший вопрос. При наведении ссылка должна делать следующее:

• задвигать ссылку влево до конца - это мы уже сделали
• показывать картинку в активном положении - это тоже сделали
• делать ссылку такой широкой, сколько звездочек должно содержаться в рейтинге. Т.е 3 звезды - 3 x 20px на звезду = 60px - а вот это мы еще не сделали!
• Повторять звезду по горизонтали как будто там много звездочек - это мы сделали

Итак, что касается нашего CSS. С тех пор как каждая звезда имеет различную ширину, в зависимости от того, как много всего звезд, мы сделали индивидуальное правило для каждого линка звезды.

.star-rating a.one-star{ 
left: 0px; 
} 

 .star-rating a.one-star:hover{ 
width:20px; 
} 
 .star-rating a.two-stars{ 
left:20px; 
} 
 .star-rating a.two-stars:hover{ 
width: 40px; 
} 
 .star-rating a.three-stars{ 
left: 40px; 
} 
 .star-rating a.three-stars:hover{ 
width: 60px; 
} 
 .star-rating a.four-stars{ 
left: 60px; 
} 
 .star-rating a.four-stars:hover{ 
width: 80px; 
} 
 .star-rating a.five-stars{ 
left: 80px; 
} 
 .star-rating a.five-stars:hover{ 
width: 100px; 
} 

Этот заключительный кусок CSS очень прост. Целью здесь было сделать каждый линк настолько широким, насколько много звезд мы планируем использовать в рейтинге x 20px в положении, когда линк активен. Таким образом, линк с четырьмя звездами будет 0px слева и 80px в ширину. Из-за этого линк будет расположен именно под курсором, так что мы не потеряем наше состояние :hover. Итак, каждый линк с :hover должен быть настолько широк, насколько много у нас звезд в рейтинге 20px, т.к для двух звезд 2 x 20px = 40px, для трех - 3 x 20px = 60px, и т.д.

Вы заметите, что прописан еще и статус для каждой ссылки в нормальном, НЕ активном положении. Это сделано потому, что каждая ссылка абсолютно позиционирована. Если мы не установим левую координату для них, будет трудно сказать, где каждая ссылка будет горизонтально расположена в разных браузерах. Поэтому, мы сделали хорошо настраиваемый контроль над горизонтальным расположением каждой ссылки.

Ну вот и все! Чтобы посмотреть на живой пример, зайдите сюда.

Интересные программы

Обращаем Ваше внимание! В рассылке публикуются далеко не все программы, а только подборка из 2-х последних выпусков. Очень много софта "проходит мимо" рассылки! Поэтому, мы Вам рекомендуем почаще заходить в раздел программ и следить за новинками.

BetterJPEG 1.4.1.1
Редактор JPEG фотографий, позволяющий избежать потерь от повторного пережатия. Better JPEG не пережимает участки изображения, которые не изменились. Lossless операци: поворот, зеркальное отображение, кроп (с возможностью выбора предустановленных аспектов и отношения сторон,...), впечатывание даты/EXIF/текста (гибко настраивается), удаление красных глаз (anti-aliasing, затемнение,...)
486.00 KB | Freeware | Язык: Английский | Размер: 486 Kb | С
Скачать!

ArtMoney v.SE 7.14
Програма предназначена для взлома практически любых игр, а точнее необходимых вам значений в игре. Сканирует установленную игру для поиска необходимых Вам в игре ресурсов (деньги, жизни, и т.д.). Благодаря специальным методам может обмануть даже те игры, в которых нет числовых видимых значений (например, графическая полоска жизни) или игры, которые кодируют свои данные. Короче говоря - низаминимая прога для читера =)
639.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать!

TSB Poll
Скрипт для создания системы голосований на Вашем сайте. Скрипт пока совсем простенький, но симпатичный :). Из текущих возможностей: неограниченное число голосований, запрет повторных голосований, возможность закрытия и открытия голосований, редактирование голосований, архив опросов, удобная и наглядная панель администрирования, не использует MySql.
13.09 KB multiplatform
Скачать!

Интернет обои
Интернет обои. Программа ежедневной смены обоев на Вашем рабочем столе. Требует подключения к Интернет. Вы не знаете, какая картинка будет в следующий раз! Получайте В ТЕЧЕНИЕ ГОДА, ЕЖЕДНЕВНО новую картинку на Ваш рабочий стол!
518.00 KB Windows 98/ME/2000/XP
Скачать!

SysUtils LAN Administration System
SysUtils LAN Administration System - утилита для автоматического администрирования локальных сетей.
1.81 KB Windows 2000/XP/2003
Скачать!

Copernic Desktop Search 1.61
Copernic Desktop Search позволяет искать различные файлы, сообщения электронной почты (поддерживается работа с Outlook Express 5.x/6.x, Outlook 2000/XP/2003, Windows Address Book), документы Word, Excel, PowerPoint, Acrobat PDF, музыкальные и видео файлы, графику и т.д. Причём, поиск может осуществляться как на локальном компьютере, так и в Интернете. Встроенные средства просмотра различных файлов позволяют визуально увидеть результаты поиска. Например, если выделить в главном окне программы значок какого-либо HTML документа, то в Copernic Desktop Search отобразится его содержание. После инсталляции программы на Панели задач появляется небольшое окошко, предназначенное для ввода поискового запроса и быстрой настройки этого поисковика. В этой версии появилась возможность поиска в почтовых базах программ Mozilla Thunderbird и Eudora, улучшен процесс индексирования данных на сетевых дисках, появилась возможность поиска по метаданным (комментариям) формата JPEG, улучшена опция печати, исправлены ошибки, внесены другие изменения и улучшения.
376.00 KB Windows 98/NT/ME/2000/XP | Англ. интерфейс | Беспл
Скачать!

Winamp TV 1.9.10
Winamp TV 1.9.10Вышла новая версия плагина для проигрывателя Winamp, позволяющего управлять TV-тюнером. Winamp TV может создавать play-листы телевизионных каналов, а также воспроизводить FM-радио. Стоит отметить высокое качество получаемой картинки, которая в ряде случаев смотрится лучше, чем при просмотре средствами программного обеспечения, поставляемом вместе с TV-тюнером. Для полноценной работоспособности этого модуля необходим проигрыватель Winamp пятой версии и выше. Не смотря на маленький размер дистрибутива, плагин имеет много настроек, которые сделают просмотр и настройку TV-каналов лёгким и комфортным процессом. В этой версии добавлена поддержка TV-плат с BDA драйвером, исправлена проблема со звуком при переключении каналов, устранена проблема с системой прорисовки видеокартинки.
264.00 KB Windows 98/NT/ME/2000/XP/2003 | Многоязычный интер
Скачать!

K-Lite Mega Codec Pack 1.43
Самый полный набор всех имеющихся в природе кодеков для видео и аудио файлов. Так же в состав архива входят плееры - Media Player Classic и BSplayer.
28.42 MB Win 9*/ME/NT/2K/XP,Free,EN
Скачать!

Winamp v.5.112 Pro
Что-то наш любимый винамп стал обновляться чють ли не каждую неделю. Плохо это или хорошо решать вам, а я сообщаю, что вышла очередная версия под номером 5.112. Вкратце: плеер позволяет работать с файлами в форматах MP3, OGG, AAC, WAV, MOD, XM, S3M, IT, MIDI и т.д., поддерживает воспроизведение видео (AVI, ASF, MPEG, NSV) с многоканальным звуком, имеет большое количество настроек и параметров, обладает возможностью смены скинов.
5.73 MB Win 9*/ME/NT/2K/XP, Free, EN
Скачать!

ratDVD 0.77.1509
Новая версия программы, которая позволяет сжимать DVD-фильмы для хранения на жестком диске. ratDVD сжимает DVD-фильм без потери качества изображения и звука, вместе с меню выбора, в контейнер, размером около 1.xГб (что значительно меньше, чем простой образ DVD-диска). Сохраняются оригинальные аудиопотоки и субтитры. Получившийся новый файл можно беспрепятственно проигрывать в любой программе-проигрывателе DVD-фильмов (например, InterVideo WinDVD 6 и CyberLink PowerDVD). Если же вы хотите проиграть этот фильм на DVD-плеере, то вам необходимо осуществить обратную конвертацию и записать на диск. Стоит отметить, что программа не будет работать с дисками, защищенными от копирования, а также дисками, не содержащими фильмы (игровыми, например). В этой версии добавлены новые языковые локализации (украинский, японский, польский языки).
4.00 MB Windows XP/2000 | Многоязычный интерфейс | Бесплат
Скачать!

Double Driver 1.0
Double Driver 1.0Новая программа, которая представляет собой Менеджер драйверов устройств. Эта утилита позволяет показать список установленных драйверов устройств в операционной системе. Тут имеются функции для сохранения и распечатки этого списка. Главной задачей Double Driver является возможность создания резервной копии драйверов для последующего восстановления. Следует отметить высокую скорость работы программы, к примеру, на создание полной резервной копии уходит менее одной минуты, что, несомненно, является большим плюсом. Все скопированные файлы распределяются по папкам, названия которых идентичны с именами устройств. Тут присутствует фильтр, который может отображать только драйвера от корпорации Майкрософт или других производителей.
.34 MB Windows 98/NT/ME/2000/XP/2003 | Англ. интерфейс
Скачать!

Daemon Tools 4.00
Вышла четвертая версия знаменитого виртуального CD-ROM’а Daemon Tools. Программа позволяет использовать имидж диска как полноценный CD-ROM (до четырех штук). Самое главное достоинство программы это возможность обхода ряда популярных защит от копирования, которыми не редко снабжаются диски с компьютерными играми. В этом плане программа действительно очень мощна. В общем если ваша легальная копия (по закону вы имеете право сделать одну резервную копию диска) отказывается работать, ссылаясь на отсутствие оригинального диска в приводе, то в большинстве случаем Daemon Tools поможет исправить это недоразумение. В новой версии множество самых разнообразных изменений и переработок.
1.37 MB Win9*/ME/NT/2K/XP,Free,EN/RU
Скачать!

RssReader
Очень удобная программа для просмотра RSS лент. Также поддерживается формат Atom. Программа без лишних наворотов - только самое необходимое. Но вместе с этим она имеет дружественный интерфейс, удобна, надежна и бесплатна. Установив RSSReader можно быть увереным, что не пропустишь новости на любимом сайте Webstudent.ru :) Для работы требует .NET Framework который можно либо скачать из Интернета или найти на диске SP2 к Windows XP
1.45 MB All win, Бесплатно
Скачать!

Интересные ссылки

Немало ссылок на бесплатный хостинг у нас в разделе "Хостинг"

Если вам этого мало, можно поискать другие варианты

Ну а в свободное время рекомендую посмотреть забавную рекламу. Чистый Фотошоп :)

Несколько новостей из интернета за последние пару дней:

• Демо долгожданного шутера Quake 4 доступно для скачивания (24/11/2005)
• Поисковик, который найдёт то, что другие не могут (24/11/2005)
• Кулеры скоро исчезнут? (24/11/2005)
• В Opera найдена опасная уязвимость (23/11/2005)
• Microsoft стандартизирует форматы Office (23/11/2005)
• AMD выпустит четырехядерный Opteron (23/11/2005)
• Хакеры начали охоту на "аську" (23/11/2005)
• Novell: у Microsoft ложная концепция безопасности (23/11/2005)
• ООН: интернет для бедных остался на словах (22/11/2005)
• Власти тестируют базу данных россиян (22/11/2005)
• Плюсы и минусы нового Интернет-пейджера компании Microsoft ... (22/11/2005)
• В Internet Explorer вновь обнаружена дыра (22/11/2005)
• Quintura Search: поиск со смысловой картой (21/11/2005)
• Новый Mail.Ru Agent позволяет "видеть" собеседника (21/11/2005)
• Kaspersky Administration Kit MP3: началось бета-тестирование (21/11/2005)

Последние темы форума:

Форум	Тема	Ответов	Просмотров	Последнее сообщение
Обсуждение сайтов	[Помогите!] Оцените мой сайт, плз! ( www.gothicrulez.jino-net.ru )    [1][2][3]	24	1808	24/11/2005 19:58 N.P.
Объявление!	Требуются работники для удаленной работы по регистрации доменов!	3	840	23/11/2005 17:47 Stoper
Обсуждение сайтов	Оцените сайт, но проект только на развитии	2	87	23/11/2005 15:58 king
Обсуждение сайтов	Самый лучший файловый сайт andy-mc.narod.ru	5	158	22/11/2005 17:29 mozg
Обсуждение сайтов	[Новое!] Сайт ТПК Сочи    [1][2][3]	21	1373	22/11/2005 12:19 Oleg33333
Обсуждение сайтов	Сайт вузовской библиотеки - нуждаюсь в оценке.    [1][2]	13	657	21/11/2005 11:50 fish_ua
Предлагаю!	создаем FAQ для начинающих    [1][2]	10	519	20/11/2005 19:46 IL-89
Web-кодинг	И снова я, и снова c++    [1][2]	14	947	20/11/2005 14:42 mozg
Замечания	Форум	1	123	19/11/2005 22:18 Crystall