ZorNet.Ru — сайт для вебмастера » HTML и CSS » Пользовательский флажок на чистом CSS

Пользовательский флажок на чистом CSS

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

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

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

Установка:

HTML

Код

<div class="kadem-kpomesab">
  <input type="checkbox" id="box-1">
  <label for="box-1">Скрипты для сайта html</label>

  <input type="checkbox" id="box-2" checked>
  <label for="box-2">Как подключать скрипты для сайта</label>

  <input type="checkbox" id="box-3">
  <label for="box-3">Стилистика дизайна сайта</label>
</div>

CSS

Код

.kadem-kpomesab {
  margin: auto;
  padding: 50px;
  background: #484848;
}

/*Checkboxes styles*/
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 34px;
  margin-bottom: 18px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #d8d5d5;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .10s, border-color .08s;
  transition: all .10s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

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

Пользовательский флажок с использованием HTML и CSS

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

Здесь кратко обсудить здесь базовую концепцию, используя которую, вы можете создавать все виды дизайн для своих пользовательских флажков, используя HTML и CSS.

HTML

Код

<input type="checkbox" id="em">
  <label for="em">Скрипты на портал</label>
  </p>
  <p>
  <input type="checkbox" id="md">
  <label for="md">Дизайн для сайта</label>
  </p>
  <p>
  <input type="checkbox" id="ln">
  <label for="ln">Ключевое слово на сайте</label>

CSS

Код

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:checked + label, [type="checkbox"]:not(:checked) + label {
  position: relative;
  padding-left: 27px;
  cursor: pointer;
  line-height: 18px;
  display: inline-block;
  color: #3e3939;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #d8cfcf;
  background: #fbfafa;
}
[type="checkbox"]:checked + label:after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid #28ab63;
  border-width: 0px 3px 3px 0;
  position: absolute;
  top: 2px;
  left: 6px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

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

04 Февраля 2020 Загрузок: 1 Просмотров: 857 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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