Половина шрифта потрясающий рейтинг сердца css
Я создаю рейтинговую систему, используя класс font-awesome fa-heart. Он отлично работает, раскрашивая полное сердце, но у меня проблемы, когда я пытаюсь залить красным только первую половину сердца. Я искал, но всегда звезды, а не полусердца, всегда полные сердца и не от font-awesome.
Используется Font awesome версии 4.0.3 и не может быть изменен ...
Есть какие-нибудь уловки, чтобы сделать это?
.full {
color:red;
}
.half {
}<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class = "rating-love ">
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart half"></span>
<a href = "#reviews"><span>23 Review(s)</span></a>
</div> Не дурак, но связанный: stackoverflow.com/questions/23569441/…
Ответы 3
Без использования JavaScript вы бы сократили ширину диапазона вдвое, скрывая переполнение.
.full {
color: red;
vertical-align:text-bottom;
}
.half {
color: red;
width: 8px;
overflow: hidden;
vertical-align:text-bottom;
margin-right: 8px;
}<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class = "rating-love ">
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart half"></span>
<a href = "#reviews"><span>23 Review(s)</span></a>
</div>Это работает, но есть некоторый запас над последним сердечком, который портит эффект ...
@JamesDouglas Неправильно, у последнего диапазона сердца нет другого поля, кроме правого, которое я ему дал. Итак, ничего не испортилось.
Я вижу маржу на своем компьютере. Я использую Firefox в OSX. Вот скриншот того, что я вижу.
@JamesDouglas Похоже, вместо этого вертикальное выравнивание.
Это может быть решено добавлением vertical-align:text-bottom; к промежуткам .full; Я взял на себя смелость отредактировать ваш ответ, включив его.
Это можно сделать с помощью текстового клипа и фонового градиента, я надеюсь, что этот трюк сработает и для вас. Я просто сделал градиент из двух цветов и разделил их на клип, чтобы он выглядел нормально. Вы можете сделать половину сердца белой, если хотите, просто изменив шестнадцатеричный код в css.
.fa-heart.half:before {
background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.full {
color:red;
}
.half {
}
.fa-heart.half:before {
background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class = "rating-love ">
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart half"></span>
<a href = "#reviews"><span>23 Review(s)</span></a>
</div> Хорошее решение! К сожалению, это, вероятно, не очень кроссбраузерно совместимо, но все же действительно хорошая идея.
@JamesDouglas Да, к сожалению, IE не поддерживает Text-stroke, :(
Это тот подход, который я искал. Жаль, что он не работает в IE, но все равно спасибо!
Буду искать варианты, если как-то возможно такое решение в IE, обновлю вас здесь.
Вот еще одна идея, с помощью которой вы можете легко получить любой рейтинг, просто изменив значение ширины:
.full {
color: red;
}
.rating-love {
position: relative;
display:inline-block;
}
.rate {
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class = "rating-love ">
<span class = "fa fa-heart"></span>
<span class = "fa fa-heart "></span>
<span class = "fa fa-heart"></span>
<span class = "fa fa-heart"></span>
<span class = "fa fa-heart"></span>
<span class = "rate" style = "width:50%;"> <!-- change this value for 0 to 100 -->
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
<span class = "fa fa-heart full"></span>
</span>
</div>
<a href = "#reviews"><span>23 Review(s)</span></a>С точки зрения семантики, отдавать все сердца классу full - не лучший вариант.
Это интересный взгляд на проблему; Единственная проблема заключается в использовании фиксированной ширины в диапазоне .rate, потому что значки FA представляют собой текст, а фактическая фиксированная ширина отсутствует.
@JamesDouglas не нужно использовать фиксированную ширину :) .. вы также можете использовать%, если вы удалите другой текст и сделаете его снаружи. В этом случае 100% ширина будет шириной 5 звезд, независимо от размера шрифта.
Спасибо @TemaniAfif! Хороший подход, но сложно настроить ширину при динамической генерации.
@Albeis еще раз проверьте, что он обновляется с% сейчас;)
наконец-то я воспользовался вашим подходом :)
FA - это значок шрифта, поэтому каждый значок представляет собой отдельный глиф. Насколько мне известно, в HTML / CSS / JS нет способа, чтобы один глиф имел разные цвета. Вы можете сделать что-то вроде использования более бледного цвета для «частичного» сердца.