Главная / Мой вордпресс / Создание звездочек-рейтингов на CSS

Создание звездочек-рейтингов на CSS

Создание звездочек-рейтинговНа многих сайтах мы видим различные рейтинги и голосования. Но отображать в виде текста рейтинг не очень-то и хочется. Давайте попробуем сделать отображение рейтингов в виде звездочек. В этом посте я не только расскажу, как сделать рейтинг с использованием CSS, но и как сделать сами изображения звездочек. Итак, приступим.

Нарисуем звездочки в Photoshop

Для начала подготовим графическую часть, а именно нарисуем звездочки для отображения рейтинга. Для этого нам понадобится Photoshop и немного времени.  Создадим три картинки:

1. Не отмеченная звездочка.
2. Отмеченная звездочка.
3. Звездочка, которая подсвечена при наведении мышки.

Ну что ж Берем в руки Photoshop и делаем все по шагам.

1. Создайте новый документ 300х300 точек с белым фоном.

2. Foreground цвет задайте как #ffc000.

3. Выберите в панели инструментов слева инструмент Custom Shape Tool.
И задайте в качестве фигуры звезду.

4. Рисуем звезду (не забывая удерживать клавишу shift, чтобы звезда была пропорциональной).

5. Нажимаем в меню Layer->Rasterize->Shape, что растеризировать фигуру. И потом, используя инструмент Magic Wand, выделяем все белые области внутри звезды (удерживаем shift, чтобы добавлять к выделению новые области).

6. Создайте новый слой, а потом заполните выделенную область цветом #fff500.
Потом нажмите CTRL+D, чтобы внять выделение. Потом объедините эти два слоя в один.

7. Далее, нам требуется уменьшить нашу звездочку до нужного размера.
А нужным размером у нас будет 25х25 точек. Изменение размера делаем через меню Image->Image Size.
Потом сдвигаем звезду немного в левый верхний угол, чтобы потом добавить тень.

8. Теперь нам надо разукрасить нашу звездочку, чтобы она выглядела более-менее нормально. Идем в меню Layer->Layer Style->Stroke и добавляем однопиксельную обводку цветом #895E26 с прозрачностью 70%. Потом добавим еще тень под нашим слоем. Должно получиться вот так:

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

9. Нажимаем мышкой на изображении слоя в списке слоев, удерживая клавишу CTRL. Мы выделили весь слой.

10. Создадим новый слой, и заполним выделенную область белым цветом. Потом снимем выделение.
Вот у нас получилась не отмеченная звездочка.

Сохраним изображение в файл, оно нам потом понадобится.

11. Отменим все изменения до п.8. с помощью истории. Выберем в меню Image->Adjustments->Brightness/Contrast и в открывшемся диалоговом окне поставим яркость -20, контрастность +30.

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

12. Объединим все три звездочки в одну картинку, как показано на рисунке.

Вот готова картинка, которую мы будем использовать при показе рейтингов. Далее, изменим размер нашей картинки на 10х30 точек, чтобы создать совсем маленькие звездочки для показа маленького рейтинга. Вот так:

Конечно, я не претендую на то, что звездочки получились очень красивыми, но суть статьи не в этом.

Создание рейтинга

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

HTML код для простого рейтинга

<ul>
<li style="width:60%;">Рейтинг 3/5</li>
<li><a href="#" title="1 из 5">1</a></li>
<li><a href="#" title="2 из 5">2</a></li>
<li><a href="#" title="3 из 5">3</a></li>
<li><a href="#" title="4 из 5">4</a></li>
<li><a href="#" title="5 из 5">5</a></li>
</ul>

В чем идея данной разметки? Мы создадим элемент-список, который будет иметь ширину в пять звезд, в котором элементы списка будут следовать друг за другом по горизонтали. В качестве фона элемент списка будет иметь пустые звездочки, а первый элемент отмеченные. Причем первый элемент списка будет иметь в качестве фона отмеченные звездочки, и будет тянуться на ширину значения рейтинга. Внутри каждого элементы расположены ссылки, которые будут показывать подсказки для каждой звездочки с помощью параметра title. А также при нажатии на ссылку можно будет отправлять данные на сервер. Для того, чтобы было понятно, что мы задумали, посмотрите на рисунок:

HTML код для уменьшенного рейтинга

<ul>
<li style="width:40%">Рейтинг 2/5</li>
<li><a href="#" title="1 из 5">1</a></li>
<li><a href="#" title="2 из 5">2</a></li>
<li><a href="#" title="3 из 5">3</a></li>
<li><a href="#" title="4 из 5">4</a></li>
<li><a href="#" title="5 из 5">5</a></li>
</ul>

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

HTML код для рейтинга, который расположен прямо в тексте

<span>
<ul>
<li style="width:80%;">Рейтинг 4/5</li>
<li><a href="#" title="1 из 5">1</a></li>
<li><a href="#" title="2 из 5">2</a></li>
<li><a href="#" title="3 из 5">3</a></li>
<li><a href="#" title="4 из 5">4</a></li>
<li><a href="#" title="5 из 5">5</a></li>
</ul></span>

Тот же код, но мы обрамляем список в тэг span, чтобы он был расположен прямо в тексте.

Далее рассмотрим CSS код для рейтинга. Все комментарии я расположил прямо в коде, чтобы было понятно, что происходит.

CSS для код для простого рейтинга

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
 background: url(starrating_stars.gif) left -1000px repeat-x;
 /* В качестве фона для сылок, списка и текущего рейтинга
    зададим нашу картинку и расположим ее пока за
    пределами элемента */
}

.star-rating{
 position: relative;
 width: 125px; /* Ширина всего рейтинга*/
 height: 25px;
 overflow: hidden;
 list-style: none;
 margin: 0;
 padding: 0;
 background-position: left top;
 /* Фоном будет являться "пустая" звездочка */
}

.star-rating li{
 display: inline;
 /* Элементы списка пойдут друг за другом. */
}

.star-rating a,
.star-rating .current-rating{
 position: absolute;
 top: 0;
 left: 0;
 text-indent: -1000em;
 /* Уберем текст за пределы видимости */
 height: 25px;
 line-height: 25px;
 outline: none;
 overflow: hidden;
 border: none;
}

.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
 background-position: left bottom;
 /* При наведении мышки и т.д. фоном будет
    нижняя часть картинки, а именно "подсвеченная"
    звездочка */
}

/* Зададим стили для каждой звездочки */
.star-rating a.one-star{
 width: 20%;
 z-index: 6;
}

.star-rating a.two-stars{
 width: 40%;
 z-index: 5;
}

.star-rating a.three-stars{
 width: 60%;
 z-index: 4;
}

.star-rating a.four-stars{
 width: 80%;
 z-index: 3;
}

.star-rating a.five-stars{
width:100%;
z-index:2;
}

/* Текущий рейтинг выше всех и имеет в качестве
   фона "нормальную" звездочку */
.star-rating .current-rating{
 z-index: 1;
 background-position: left center;
}

CSS для код для рейтинга, который расположен в тексте

Этот код добавляется к существующему.

.inline-rating{
 display: -moz-inline-block;
 display: -moz-inline-box;
/* Для поддержки кроссбраузерности */

 display: inline-block;
 vertical-align: middle;
}

CSS для код для маленького рейтинга

Этот код добавляется к существующему. Все то же самое, только в качестве фона мы задаем маленькую картинку, и размеры каждого элемента подправим на 10х10 точек.

.small-star{
width:50px;
height:10px;
}

.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
 background-image: url(starrating_stars_s.gif);
 line-height: 10px;
 height: 10px;
}

Вся работа проделана. Теперь взглянем на результат.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*