<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Стилизация radio на CSS

Стилизация radio на CSS

Давайте немного освежим в памяти, для чего нужны radio кнопки на сайтах. Radio кнопка – это переключатель, который используют в формах, когда пользователю надо сделать выбор, между несколькими вариантами. Например, выбрать между марками автомобилей, для последующей аренды.

Дизайнеры рисуют в макетах радиокнопки, как им нравиться и совсем не обязательно круглой формы. Нам же, верстальщикам, надо думать, каким образом стилизовать всю эту красоту.

HTML код

Атрибут for у тега label устанавливает связь с input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки – honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).

Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.

<div class="radio">
    <input class="radio_input" name="car" type="radio" id="honda">
    <label class="radio_label" for="honda">Honda</label>
</div>
<div class="radio">
    <input class="radio_input" name="car" type="radio" id="renault">
    <label class="radio_label" for="renault">Renault</label>
</div>

По умолчанию, браузер отобразит любой элемент формы. На картинке ниже, вы можете увидеть наши radio, без CSS стилей.

Стилизация radio на CSS.

Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.

CSS-код

Вложенные теги input+label, позиционируем относительно родителя – div с классом radio.

.radio {
    position: relative;
    margin-bottom: 1rem;
}

Спрячем дефолтные маленькие кружочки, свойство appearance обязательно прописываем с вендорными префиксами.

.radio_input {
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем стандартные кружочки */
    position: absolute;
}

Стилизуем текст внутри тега label.

.radio_label {
    padding-left: 25px;/* отступ слева */
    font-size: 1rem;
    color: #444;
    cursor: pointer; /* курсор рука */
}

Создадим два состояния radio кнопок, с помощью псевдоэлементов before+after. Стилизуем before, как пустой белый кружок, after – кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром after, будет находиться внутри круга с большим диаметром before.

Стилизуем псевдоэлемент before

.radio_label:before {
    content: "";
    display: block; /* не в строку */
    width: 16px; /* ширина блока */
    height: 16px;/* высота блока */
    border: 1px solid #ccc;/* рамка */
    background-color: #fff; /* цвет фона */
    border-radius: 50%;/* получаем круг */
    position: absolute;/* расположен точно в родителе */
    top: 0; /* расстояние от верха родителя */
    left: 0;/* расстояние слева от родителя */
    z-index: 1; /* на нижнем слое */
    transition: border .1s linear;/* плавный переход для border */
}

Стилизуем псевдоэлемент after

.radio_label:after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #49d120;
    border-radius: 50%;
    opacity: 0; /* полностью прозрачный */
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;/* на верхнем слое */
    transition: opacity .1s linear; /* плавный переход для opacity */
}

Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.

.radio_input:checked + .radio_label:before {
    border-color: #319612;
}

А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.

.radio_input:checked + .radio_label:after {
    opacity: 1;
}

Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное. Мы получили стилизованные radio кнопки на чистом CSS.

Демонстрация примера

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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