Как реализовать звездный рейтинг с частичным закрашиванием звезд?
Добрый день.
Есть вот такой рейтинг со звездами Он использует иконочный шрифт и его преимущество в том что он легко масштабируется, для этого достаточно изменить всего 1 параметр, размер шрифта.
Хотел добавить возможность отображать дробный рейтинг, то есть например если оценка 6,3, то что бы закрашивались шесть звезд и еще часть седьмой. Никак не соображу как это сделать так, что бы при этом сохранить возможность легко его масштабировать, так как приходится указывать фиксированный размер звезд а так же их смещение.
Или с данным вариантом это не возможно?
Нужны звезды от иконочного шрифта, а там canvas. И не нужна возможность выставлять дробную оценку, ее нужно лишь отображать, а выставляться оценка должна целая: 1, 2, 3, 4, 5, 6, 8, 9, 10.
Код в моем примере меня почти всем устраивает, я лишь просил подтолкнуть в верном направлении как его немного модернизировать, а не предлагать совсем другие готовые вариант, которые и близко на него не похожи.
djok2142, вам только полностью готовое решение под вашу проблему подходит?
А как насчет того, чтобы посмотреть варианты, изучить принципы их работы и сделать нужное вам исполнение?
Олег, так звезды у вас не кликабельные, на них нельзя нажать что бы выставить оценку, и при наведении курсора на звезду не закрашиваются все предыдущие. Я знаю как сделать частичное закрашивание и без градиента, вся проблема как раз, это объединить частичное закрашивание с тем что бы звезды были кликабельными, и при наведении курсора закрашивались все предыдущие звезды. Без JS на чистом CSS.
Средний
