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

25 декабря 2015 | Опубликовано в css | Нет комментариев »

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

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

Для создания рейтинга в виде звезд нередко используются радиокнопки, так что разметка может не показаться Вам необычной. Единственное, что нужно сделать иначе, — это обратный порядок расположения звезд: наивысший рейтинг должен идти первым из-за особенностей работы селекторов CSS3, это ограничение может быть убрано в CSS4, но до этого еще далеко.

Конечно, JavaScript понадобится для присвоения обработчика событий, если результаты голосования нужно зарегистрировать с помощью AJAX, но это не относится к самому рейтингу, который может работать как часть обычной формы.

В браузерах, которые не поддерживают псевдокласс :checked (отмечено), особенно Internet Explorer ниже версии 9, рейтинг должен отображаться как радиокнопки, но мы не проверяли.

Итак, вот что получается:

Демонстрация работы

Код HTML

<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

Код CSS

.rating {
    float:left;
}

/* Конструкция :not(:checked) работает как фильтр, чтобы браузеры, которые не поддерживают псевдокласс :checked не применяли эти свойства. Все браузеры, поддерживающие псевдокласс :checked, поддерживают и псевдокласс :not(), так что фильтр должен отработать правильно. */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

Автор урока Lea Verou

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

Опубликовано в css, декабря 25, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

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

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые