company_banner

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

  • Tutorial
Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и 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.1%Да, узнал много нового;671
  • 32.0%Новыми для меня оказалось 1-2 рецепта;357
  • 7.9%Все это я уже знал.88
Wargaming
84.31
Company
Share post

Comments 39

    +16
    | Прогресс не стоит на месте, и теперь вы можете именовать классы как душе угодно:

    Напомнило

    image
    0
    Ребят, подскажите как правильно стилизовать checkbox, если у меня такая верстка:

    <label>
       Checkbox
       <input type="checkbox"  name="check" />
    </label>
    
      –5
      А зачем чекбокс оборачивать в label?
        +9
        Чтоб не мучиться с id и for.
          –4
          По моему убеждению — это как-то нелогично, помещать инпут в подпись, несмотря на удобство.
          Для такой верстки вариант всего 1: использовать селектор родительского элемента
          input[type=checkbox] ^ label:before {
          
          }
          input[type=checkbox]:checked ^ label:before {
          
          }
          

          Но с поддержкой пока плохо.
            +2
            Ох. Эти ваши убеждения тут на хабре видят новички. Кто-то ведь даже скопирует ваш код и будет использовать у себя.

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

            Например, чекбокс, скрытый с помощью display: none будет недоступен для перехода Tab'ом. Поэтому на wtfforms.com и в других демках чекбоксы скрывают прозрачностью или иными способами.
            • UFO just landed and posted this here
            • UFO just landed and posted this here
                0
                А теперь это же, но с гарантией уникальности id. Учтите, что страница набирается из компонентов, верстаемых разными людьми.
                • UFO just landed and posted this here
            +2
            Я просто текст «Checkbox» оборачиваю в div. и стилизую уже div. Или можно вообще пустой div после input вставить и все картинки уже в него.
              0
              Если не трудно набросайте пожалуйста короткий примерчик.
                –1
                Как-то так:

                <label>
                   Checkbox
                   <input type="checkbox"  name="check" />
                   <div/>
                </label>
                


                label input[type=checkbox] + div:before {
                 /*как в статье*/
                }
                
                label input[type=checkbox]:checked + div:before {
                 /*как в статье*/
                }
                
            0
            Добавьте внутрь span сразу после input, для него и пишите стили. Пример тут: wtfforms.com/
            +2
            Статься класс, реально крутые вещи)
            Хорошо бы ссылки на примеры добавить самому попробовать все потыкать, а то гифок как то маловато
              +1
              Да, дельная идея с ссылками, спасибо!
                +1
                А то у меня от некоторых примеров прям слюнки текут, хочется что-то свое дописать к имеющемуся. Но за сами идеи большое спасибо!
                  +1
                  Добавил ссылку на код первого примера.
              0
              А есть приложение которое делает gif из анимации в html?
                0
                Неплохая идея) Как найдете, пожалуйста, расскажите)
                  0
                  Добавил ссылку на код первого примера.
                    +2
                      0
                      Спасибо, опробуем) Раньше приходилось снимать видео, а потом конвертировать в гиф.
                    0
                    Вертикальные отступы в процентах пересчитываются исходя из ширины, а не высоты родительского элемента.

                    Кто-то знает почему?
                    На stackoverflow только догадки stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width
                      +1
                      Как это догадки, там же ответили. Я не ох ты какой переводчик, но вышло, что: высота родителя зависит от высоты детей, отступы детей зависят от высоты родителя. Когда отступы у детей в процентах получается замкнутый круг. И, видимо, получилось «нет времени объяснять», давайте делать :)
                      Или чтото не так понял?
                        0
                        Как я понял, высооты взаимозависимы, и расчет их высоты браузером может вызвать бесконечную рекурсию)
                          0
                          Нет там замкнутого круга.
                          Допустим высота дочернего элемента 100px, а верхнее поле 80%.
                          Имеем уравнение x=0.8x+100
                          Получаем x=500.

                          Высота родителя 500px, дочернего элемента 100px, padding-top 400px.
                        0
                        Для стилизации чебоксов можно использовать не только символы юникода, но и картинки (и вектор). Раньше этим баловался. Но точки зрения UX — это неправильно и дизайнеру за такое надо щелбан давать.
                          0
                          Неправильно стилизовать чекбоксы?
                          Т.е. когда на каждой операционке свой чекбокс со своими размерами, это норм?
                            +3
                            Ну а то, что в каждой ОС свой десктоп (или несколько) со своими окнами, скроллами и контролами вас не смущает?
                            Привязываться к размерам чекбокса — это дурной тон. Как и к размерам текста.
                          –1
                          В метро сейчас, не могу проверить.
                          Но помнится мне, стилизованные чекбоксы не работают в FF.
                            0
                            Усе работает.
                            • UFO just landed and posted this here
                              +1
                              .block {
                                  transform: translatez(0);
                              }
                              


                              Ещё помогает свойство -webkit-backface-visibility: hidden;, хоть у него назначение и другое, также оно пригождается для тех случаев, когда элементы, которые используют трансформации, распологаются на неожиданном месте, например, при поворотах и со смещённым центром в свойстве transform-origin.
                              • UFO just landed and posted this here

                              Only users with full accounts can post comments. Log in, please.