Pull to refresh
0
ex-Wargaming
Издатель и разработчик free-to-play MMO

Подборка занимательных CSS рецептов «Голые пятницы #2»

Reading time 3 min
Views 50K
Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

голые пятницы

Стилизация checkbox и radiobutton


По традиции, начнем с рубрики «пыльные полки». На хабре уже писали, и не один раз, как стилизовать инпуты без 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";
}

стилизованный checkboxc

Как видите, вся соль в псевдоэлементах и псевдоселекторе :checked (IE9+). В коде выше мы прячем оригинальный инпут, вместо него выводим стилизованный псевдоэлемент, и при клике показываем символ Unicode в свойстве content.

Обратите внимание, что форма записи символа Unicode в CSS отличается от таковой в HTML. Здесь через слеш указывается номер символа, тогда как HTML код будет выглядеть так: &#10003;.

Давайте же пойдем еще дальше и АНИМИРУЕМ наш checkbox:

input[type=checkbox] + label:before {
    content: "\2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
    color: #000;
}

или radiobutton:

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;    
}

анимированный стилизованный checkbox

Инпутов такого рода в интернете пока что маловато, поэтому дерзайте!
Полный список символов юникода можно посмотреть здесь. Поиграться с кодом — здесь

Вертикальные отступы элемента, заданные в процентах


Невероятно, но факт. Вертикальные отступы в процентах пересчитываются исходя из ширины, а не высоты родительского элемента.

Давайте создадим 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 {
	counter-reset: i; //обнуляем счетчик
}
.list > li {
	counter-increment: i; //присваиваем счетчику идентификатор
}
.list li:after {
	content: "[" counter(i) "]"; //выводим значение
}

В свойстве counter-reset мы задаем произвольный иденитификатор (или несколько), а также начальное значение (по умолчанию = 0).
В свойстве counter-increment после ссылки на идентификатор также можно указывать число. Оно будет определять значение приращения счетчика (например, "counter-increment: i 2" выведет только четные числа).

css counter

Думаете, это можно использовать только для упорядоченных списков? А вот и нет! Счетчик работает со всеми элементами.

Включение аппаратного ускорения


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

.block {
    transform: translatez(0);
}

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

Классы на Unicode


Прогресс не стоит на месте, и теперь вы можете именовать классы как душе угодно:
. {
    ...
}
. {
    ...
}
.☭ {
    ...
}
.★ {
    ...
}
. {
    ...
}

Классы на Unicode

Теперь скучные классы, типа "arrow" можно заменить на ""! Долой скучные буквы!

А на самом деле
Конечно же, это была шутка. В серьезных проектах классы лучше именовать по старинке, ибо utf-8 может быть включен не везде.


Бонус для ретроградов


Если вам до сих пор приходится поддерживать IE7 и писать для него опостылевшие хаки через скучный символ "*", для вас есть отличная новость! Теперь хаки можно обозначать веселым смайликом!

body {
    :) background: pink;
}


Не правда ли, такая запись намного приятнее глазу? Есть в ней какой-то символизм. После смайлика даже можно ставить пробел, и это никак не повлияет на последующие свойства!

На сегодня все. Надеемся, это подборка была удачной. До скорых встреч.
Only registered users can participate in poll. Log in, please.
Понравилась ли подборка?
60.13% Да, узнал много нового; 671
31.99% Новыми для меня оказалось 1-2 рецепта; 357
7.89% Все это я уже знал. 88
1116 users voted. 141 users abstained.
Tags:
Hubs:
+42
Comments 39
Comments Comments 39

Articles

Information

Website
lesta.ru
Registered
Founded
Employees
501–1,000 employees
Location
Россия