Создание флажка, как будто это 2020

Создание пользовательского флажка

Шаги

Нажмите, чтобы увидеть код в шагах ниже.

Сначала запустите Codepen, а затем выполните следующее:

1. Создание элементов

    

1. Скрытие флажка

        

2. Флажок сборки с меткой

        

3. Анимация флажка при установке / снятии флажка

    

2. Построение / расположение линий выражения с интервалами.
       

    

3. Анимировать строки выражения

    

4. Проверка доступности с помощью ChromeVox

    

5. Сделай вещи еще более изумительными

Шаг 1. Флажок и метка

  $ cb: кубический Безье (0,17, 0,67, 0,83, 0,67);
$ checkbox-size: 1.5em;

вход [type="checkbox"] {
  @extend .center;
  непрозрачность: 0;
  события указателя: нет;

  & + label {
    @extend .center;
    ширина: $ checkbox-size;
    высота: $ checkbox-size;
    радиус границы: 50%;
    рамка: сплошная 2px белая;
    курсор: указатель;
    тень от коробки: 1px 1px 1px 1px rgba (3, 79, 32, 0,5);
    переход: box-shadow 0.4s $ cb, фон 0.4s $ cb;
  }

  &: проверено + метка {
    цвет фона: фиолетовый;
    тень от рамки: 1px 1px 1px 1px rgba (3, 79, 32, 0.5), 0 0 0 5px белая вставка;
  }
}  

Здесь мы выбираем и устанавливаем наш флажок и метку для нормальных и: проверенных состояний. Мы хотим, чтобы флажок OG исчез. Мы могли бы использовать что-то вроде display: none; для этого, однако, это не полезно для программ чтения с экрана. Так что еще один способ сделать это — установить флажок opacity: 0; и указатель-события: нет; .

Обычно это альтернативное исчезающее лечение сопровождается видимостью : нет; . Тем не менее, установка здесь видимости no фактически отключает переключение метки с помощью клавиатуры (что для доступности не bueno). Итак, мы собираемся оставить линию видимости отключенной.

Затем мы создаем этикетку, чтобы она выглядела как эта модная версия заполняющегося пузыря или флажка:

Шаг 2: Линии выражения

Теперь мы собираемся добавить 12 интервалов с классом выражений . Мы можем (и делаем) сделать это с четырьмя пролетами и псевдоэлементами в финальном Codepen, так что идите туда, если хотите прыгнуть прямо в глубокий конец. А пока мы начинаем с простого!

Здесь у нас есть несколько переменных ( $ distance, $ height, $ offset ), которые мы будем использовать для создания / позиционирования линий выражения, а также для их анимации на следующем шаге.

  $ расстояние: 1,125em; // 18px
высота: 1,25 евро; // 20px
$ offset: 1,25em; // 20px

.expression-lines {
  высота: $ высота;
  ширина: 1px;
  цвет фона: белый;

  внизу: $ расстояние;
  положение: абсолютное;

  transform-origin: центр $ высота + $ расстояние;

  $ строк: 12;
  @for $ i от 1 до $ строк {
    &: nth-of-type (# {$ i}) {
      transform: rotate (360deg / $ lines * $ i);
    }
  }
}
 

Мы даем каждой строке выражения высоту 20 пикселей в ems для масштабируемости; так что давай, сделай тело размером шрифта 200% и посмотри на эту шкалу щенка! Им также дают ширину в 1 пиксель, белый цвет и некоторые положения с основанием, положением и происхождением преобразования.

Замечательная петля, которую вы видите, просто распределяет их равномерно вокруг флажка. Итак, мы получаем этот эффект:

Шаг 3: Анимация линий выражения

Теперь для анимации выражения на флажке : флажок ! Нам нужно, чтобы строки выражения начинались невидимо, поэтому мы добавим к описанным выше стилям opacity: 0; . Затем мы будем анимировать не только непрозрачность, но и положение линий выражения, чтобы получить эффект пружины.

  $ offset: 1,25em; // 20px
input [type="checkbox"]: проверено ~ .expression-lines {
  анимация: весна 0,6 с легкостью вперед;
}

@keyframes spring {
  0% {
    непрозрачность: 1;
    высота: 0 пикселей;
    transform-origin: центр $ расстояние;
  }
  100% {
    высота: $ высота;
    низ: $ расстояние + $ смещение;
    transform-origin: центр $ высота + $ расстояние + $ смещение;
  }
}
 

Ключевой кадр пружины используется для наших линий выражения, чтобы вырастить их и переместить их одновременно. Transform-origin очень важна, нам нужно это изменить, когда мы анимируем строки выражения от флажка, чтобы они равномерно «росли».

См. Pen .
Создание флажка, как это было в 2020 году Алисса Николл (@alyssamichelle)
на CodePen.

Шаг 4. Проверка доступности с помощью ChromeVox

Как я уже упоминал, когда мы создавали наш флажок, display: none; как известно, довольно недружелюбно для программ чтения с экрана, как и видимость : none; . Итак, давайте проверим, как работает наш флажок, не используя ни один из этих двух методов.

В этом видео я использую ChromeVox для чтения с экрана. Когда я нажимаю вкладку, флажок автоматически устанавливается. Затем я могу переключаться между проверено и не проверено с помощью пробела!

Чтобы показать вам, что происходит (подготовиться к рывку), когда мы используем одну из приведенных выше строк кода, я добавил display: none; к флажку и повторил попытку!

Теперь, когда я пытаюсь перейти на флажок, метка флажка, которую мы создали, полностью исчезает. Я продолжаю пытаться, выбрав невидимый флажок с помощью мыши (не очень доступный для многих учетных записей), и затем я пытаюсь переключаться между отметив и отметив используя пробел. Как видите, ничего не происходит. Проще говоря, TLDR, не используйте отображение : нет; или видимость: нет; при попытке анимировать / создать необычную прелесть с помощью вашего CSS.

Шаг 5: Добейтесь большего с нашим CSS

Первоначально, когда я выполнил эту задачу, я использовал псевдоэлементы и только четыре деления для создания всех 12 строк выражения:

Использование псевдоэлементов для линий надписей и выражений (без разметки)

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

Нет Внутреннего Кольца Смерти

Проверьте это здесь. Этот пример включает не только использование забавы с псевдоэлементом, но также удаляет небольшое внутреннее кольцо остатка, которое было вызвано тем, что я анимировал тень внутреннего прямоугольника для увеличения круга.

До:

См. Pen .
Пользовательский флажок — ВНУТРЕННЕЕ КОЛЬЦО СМЕРТИ Алиссой Николл (@alyssamichelle)
на CodePen.

Надеюсь, вы узнали что-то из этого флажка веселья! Не забывайте всегда сохранять доступность в глубине вашего ума при создании. Мы всегда можем сделать лучше. 🙂

Удачного кодирования!