Рейтинг со смайликами на чистом CSS

Рейтинг со смайликами на чистом CSS

Рейтинг со смайликами на чистом CSS

По CSS правилам можно выбрать только одну радиокнопку из группы. С рейтингом также — пользователь может выбрать один смайлик из пяти. Поскольку все смайлики по сути висят на невидимых радиокнопках.

HTML разметка

Создадим пять радиокнопок с разными смайликами внутри меток label. Подходящие иконки смайликов были скачаны с сайта flaticon. Первая радиокнопка помечена, как checked (выбрана).


<div class="rating">
    <input type="radio" name="star" id="star1" checked="">
    <label for="star1">
        <img src="5.png">
        <h4>Loved It</h4>
    </label>
    <input type="radio" name="star" id="star2">
    <label for="star2">
        <img src="4.png">
        <h4>Liked It</h4>
    </label>
    <input type="radio" name="star" id="star3">
    <label for="star3">
        <img src="3.png">
        <h4>It's Ok</h4>
    </label>
    <input type="radio" name="star" id="star4">
    <label for="star4">
        <img src="2.png">
        <h4>Dislike It</h4>
    </label>
    <input type="radio" name="star" id="star5">
    <label for="star5">
        <img src="1.png">
        <h4>Hated It</h4>
    </label>
    <h2 class="text">Do you like this channel?</h2>
</div>

Рейтинг со смайликами на чистом CSS

CSS код

Разместим контейнер rating со смайликами внутри в центре экрана в один ряд.


@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;/*подключение flexbox сетки*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на всю высоту видимой области*/
    background: #20152d;/*цвет фона*/
}
.rating{
    position: relative;/*относительное позиционирование*/
    display: flex;
    flex-direction: row-reverse;/*расположение элементов в ряд со сменой направления*/
}

Рейтинг со смайликами на чистом CSS

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


.rating input{
    display: none;/*не показывать радиокнопки*/
}
.rating label{
    position: relative;
    width: 0;/*нулевая ширина*/
    height: 128px;/*высота*/
    cursor: pointer;/*смена курсора*/
    transition: 0.5s;/*плавный переход*/
    filter: grayscale(1);/*черно-белый фильтр*/
    opacity: 0.2;
    opacity: 0;/*значение прозрачности*/
    text-align: center;/*текст в центре*/
}
.rating:hover label{
    width: 160px;
    opacity: 0.2;
}

Рейтинг со смайликами на чистом CSS

Но мы не должны видеть все смайлики одновременно. При наведении мыши, должен показываться только один смайлик. Как это сделать? Применим свойство opacity со значением 1, только к checked радиокнопке при наведении.


.rating input:hover + label,
.rating input:checked + label{
    filter: grayscale(0);
    opacity: 1;
    width: 160px;
}

Рейтинг со смайликами на чистом CSS

Когда мы прятали иконки, сделав их прозрачными, текст под иконками тоже стал невидимым. Вернем обратно текст, убрав у него прозрачность при наведении на селектор input:checked + label h4.


.rating label h4{
    color: #fff;/*цвет текста*/
    font-size: 24px;/*размер шрифта*/
    padding-top: 10px;/*отступ сверху*/
    font-weight: 500;/*толщина шрифта*/
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50px) scale(0);/*перемещение и масштабирование*/
    transition: 0.5s;
}
.rating input:hover + label h4,
.rating input:checked + label h4{
    opacity: 1;
    transform: translateY(0px) scale(1);
}
.text{
    position: absolute;/*абсолютное позиционирование*/
    top: -80px;/*верхняя позиция*/
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    width: 500px;
    font-weight: 700;
    letter-spacing: 2px;/*межбуквенное пространство*/
    text-align: center;
    white-space: nowrap;/*запрет переноса на новую строку*/
    font-size: 36px;
}

Рейтинг со смайликами на чистом CSS

Источник

НЕТ КОММЕНТАРИЕВ

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

19 − четырнадцать =