Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без изображений и JS, особенностях вертикальных отступов, CSS-счетчиках, безграничных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.
Стилизация флажка и переключателя
По традиции начнем с раздела «пыльные полки».В хабе уже написал , и не раз , как стилизовать входные данные без JavaScript. Но мы пойдем немного дальше и тоже откажемся от картинок:
<input type="checkbox" id="check" name="check" /> <label for="check">Checkbox</label>
input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {
content: "";
border: 1px solid #000;
font-size: 11px;
line-height: 10px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
text-align: center;
vertical-align: middle;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
}
Как видите, вся суть в псевдоэлементах и псевдоселекторе :checked (IE9+).
В приведенном выше коде мы скрываем исходный ввод, вместо этого отображаем стилизованный псевдоэлемент, а при нажатии отображаем символ Юникода в свойстве содержимого.
Обратите внимание, что форма записи символа Юникода в CSS отличается от формы в HTML. Здесь номер символа указывается через косую черту, а HTML-код будет выглядеть так: ✓.
Пойдем еще дальше и АНИМИРУЕМ наш флажок: input[type=checkbox] + label:before {
content: "\2713";
color: transparent;
transition: color ease .
3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
или радиокнопка: input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .
3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}
Таких материалов в Интернете пока недостаточно, так что дерзайте!
Полный список символов Юникода можно найти здесь.
Здесь .
Поиграйтесь с кодом - Здесь
Вертикальное заполнение элемента в виде процента
Невероятно, но факт. Проценты вертикального заполнения пересчитываются на основе ширины, а не высоты родительского элемента.
Создадим 2 блока: <div class="parent">
<div class="child"></div>
</div>
.
parent { height: 400px; width: 200px; } .
child {
height: 50%;
padding-top: 25%;
padding-bottom: 25%;
width: 100%;
}
Теоретически дочерний блок должен заполнять высоту родительского.
Но что мы видим? 
Поскольку проценты рассчитываются на основе ширины родительского элемента, высоты недостаточно.
Этот нюанс необходимо иметь в виду.
Счетчики на чистом CSS
Мало кто знает, что со времен IE8 только CSS умел подсчитывать элементы.
<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
.
list {
Теги: #CSS #HTML #веб-разработка #CSS #HTML
-
Простой Дизайн Сайта
19 Oct, 24 -
Led-It-Go – Угроза Безопасности Данных
19 Oct, 24 -
Калькулятор Пошлины На Ebay.ru
19 Oct, 24 -
Обзор Wexler.tab 7B: Планшет «За Два Рубля»
19 Oct, 24
