<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 3.0

PHP и MySQL с Нуля до Гуру 3.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 9 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

В Бонусе «Создание сайта для библиотеки» Вы увидите применение знаний из основного курса при создании полноценного проекта.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Рейтинг со смайликами на чистом 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.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.