<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

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

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на 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):

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