Комментарии 23
Неплохо конечно же, но вы просто слегка изменили решение от Криса Койера на который ссылается сам автор Font Awesome на этой странице.
А вот что касается отдельного подключения целой таблицы стилей со шрифтом Font Awesome, то это реально громоздко. можно было просто обойтись одной или двумя иконками звездочек.
Что-то вроде этого:
А вот что касается отдельного подключения целой таблицы стилей со шрифтом Font Awesome, то это реально громоздко. можно было просто обойтись одной или двумя иконками звездочек.
Что-то вроде этого:
.css
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .b-star-rating__ico:before, {
content: "";
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22imgView%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22256px%22%20height%3D%22255px%22%20viewBox%3D%220%200%20126.729%20126.73%22%20style%3D%22display%3A%20block%3B%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22detail%20convertSvgInline%20replaced-svg%22%20data-id%3D%2256786%22%20data-kw%3D%22favourites7%22%20fill%3D%22%23FF9800%22%3E%3Cg%3E%3Cpath%20d%3D%22M121.215%2C44.212l-34.899-3.3c-2.2-0.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101%2C0l-12.4%2C30.3%20%20%20c-0.8%2C2.1-2.8%2C3.5-5%2C3.7l-34.9%2C3.3c-5.2%2C0.5-7.3%2C7-3.4%2C10.5l26.3%2C23.1c1.7%2C1.5%2C2.4%2C3.7%2C1.9%2C5.9l-7.9%2C32.399%20%20%20c-1.2%2C5.101%2C4.3%2C9.3%2C8.9%2C6.601l29.1-17.101c1.9-1.1%2C4.2-1.1%2C6.1%2C0l29.101%2C17.101c4.6%2C2.699%2C10.1-1.4%2C8.899-6.601l-7.8-32.399%20%20%20c-0.5-2.2%2C0.2-4.4%2C1.9-5.9l26.3-23.1C128.615%2C51.212%2C126.415%2C44.712%2C121.215%2C44.212z%22%20style%3D%22%22%20fill%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
width: 20px;
height: 20px;
display: block;
background-size: cover;
}
Проще использовать свой шрифт, сделанный на сервисах типа fontello.com
А вообще, автор поста не открыл Америки. Решение известное и довольно прикольное.
А вообще, автор поста не открыл Америки. Решение известное и довольно прикольное.
Спасибо за ссылки, решение на Font Awesom не видел. В отрыве от контекста для такой задачи грузить весь Font Awesom, конечно, накладно. Но как я замечаю эта библиотека шрифтов очень часто итак подключена на многих проектах. В Криса Койера не нравиться использование direction rtl, мне кажется с float лучше. Кроме того я максимально изолировал блок рейтинга, что-бы просто скопипастить код и вставить в любое место на сайте.
А зачем label-ы? И hover-ы можно обыграть интереснее: codepen.
Псевдо-элементы на элементах с заменяемым содержимым противоречат спецификации и то, что это поддерживает Webkit / Blink вовсе не означает, что так всегда и будет.
code.google.com/p/chromium/issues/detail?id=480891
bugzilla.mozilla.org/show_bug.cgi?id=1157575
code.google.com/p/chromium/issues/detail?id=480891
bugzilla.mozilla.org/show_bug.cgi?id=1157575
Да, согласен. Странно, как такое решение работает. Псевдоэлементы before и after нельзя добавлять к одиночным тегам, так как в них нельзя ничего вложить. Хром как-то осилил, Firefox и IE10 в ауте.
Если интересно, то вот тест возможности использования псевдо-элементов в различных элементах: red-team-design.com/wp-content/uploads/2012/06/generated-content-on-replaced-elements-test.html.
Спасибо! Посмотрел исходник в хроме, офигел. В DOM браузер открыл input, вставил туда псевдоэлемент и закрыл — prntscr.com/7tis4r Это жесть какая-то. Не знаю, что именно меня тревожит, но это уже слишком.
Спасибо, очень интересно.
Не знал, что Blink настолько сошёл с ума.
«Где логика? Где разум?» © известный анекдот.
Не знал, что Blink настолько сошёл с ума.
<input type="button"> — нет псевдоэлемента.
<input type="checkbox"> — есть псевдоэлемент.
«Где логика? Где разум?» © известный анекдот.
К одиночным можно, нельзя к заменяемым (replaced). Факт 11 отсюда: www.sitepoint.com/12-little-known-css-facts-the-sequel
Видимо создателям спецификации ничего не говорят такие вещи, как AJAX, DHTML, contenteditable в конце концов. В современном вебе у любого элемента может замениться содержимое, у некоторых это происходит чаше, чем у иного input-а. По этой логике следует отказаться от псевдоэлементов вообще.
Ну не правильно это как-то считать с конца)
Лучше как положено с 1 до 5 codepen.io/anon/pen/mJjEMj
Конечно звездочки немного прыгают, но это скорее всего из-за самого шрифта. Если их подогнать под целые значения и сделать свой шрифт, то все должно стать супер)
Лучше как положено с 1 до 5 codepen.io/anon/pen/mJjEMj
Конечно звездочки немного прыгают, но это скорее всего из-за самого шрифта. Если их подогнать под целые значения и сделать свой шрифт, то все должно стать супер)
А зачем FontAwesome, когда есть ★ и ☆?
Как-то странно, что если одна из звезд чекнута, то ховер срабатывает только на тех, что после нее, а предыдущие как будто дизейблятся. Не думаю, что это ожидаемое поведение.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Star rating на CSS со шрифтовыми иконками от font-awesome