<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

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

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

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

Как создать To Do List на чистом CSS (часть 2)

Как создать To Do List на чистом CSS (часть 2)

4) Позиционирование инпута и текста

.list ul label{
    position: relative; / * относительное позиционирование * /
    display: flex; / * отображать как flexbox * /
    cursor: pointer; / * курсор в виде руки * /
    justify-content: space-between; / * горизонтальное выравнивание * /
    align-items: center; / * вертикальное выравнивание * /
}


Как создать To Do List на чистом CSS.

5) Кроссбраузерное скрытие инпутов

.list ul label input{
    opacity: 0;
    visibility: hidden;
    appearance: none;
}


Как создать To Do List на чистом CSS.

6) Изменение позиционирования текста

.list ul label p{
    position: absolute;
}


Как создать To Do List на чистом CSS.

7) Рисование маленьких окружностей

Пустые теги span специально создавались в HTML-разметке под маленькие окружности.

.list ul label span{
    position: relative; / * относительное позиционирование * /
    width: 20px; / * ширина окружности * /
    height: 20px; / * высота окружности * /
    border: 1px solid #ccc; / * цвет толщина стиль окружности * /
    border-radius: 50%; / * радиус круга * /
    display: flex; / * отображать как flexbox * /
    justify-content: center; / * горизонтальное выравнивание * /
    align-items: center; / * вертикальное выравнивание * /
}


Как создать To Do List на чистом CSS.

8) Создание галочек в кружках

У блочного псевдоэлемента делается обводка левой и нижней стороны условного квадрата, затем квадрат поворачивается на 40 градусов и получается галочка.

.list ul label span:before{
    content: '';
    position: absolute; / * абсолютное позиционирование * /
    top: 5px; / * отступ сверху * /
    width: 10px; / * ширина галочки * /
    height: 5px; / * высота галочки * /
    border-left: 2px solid #ccc; / * цвет толщина левой рамки * /
    border-bottom: 2px solid #ccc; / * цвет толщина нижней рамки * /
    transform: rotate(-40deg); / * разворот блока на 40 градусов * /
}


Как создать To Do List на чистом CSS.

9) Зачеркивание текста при клике

Помните спрятанный чекбокс? Мы его не видим, но он там есть. Поэтому смело кликаем в любом месте label + содержимое тега p. В результате мы видим перечеркнутый текст, благодаря значению line-through.

.list ul label input:checked ~ p{
    text-decoration: line-through; / * зачеркивание * /
    color: #ccc; / * цвет зачеркивания * /
}


Как создать To Do List на чистом CSS.

10) Заполнение кружочка цветом при клике

При клике по тегу span кружок окрашивается в указанный цвет, благодаря работе чекбокса.

.list ul label input:checked ~ span {
    border: 1px solid #1B5E20; / * стили обводки * /
    background: #1B5E20; / * цвет фона * /
}


Как создать To Do List на чистом CSS.

11) При клике галочки меняют цвет

Выделяем галочки белым цветом, при клике по псевдоэлементу тега span.

.list ul label input:checked ~ span:before{
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}


Как создать To Do List на чистом CSS.

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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