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

[aush]

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

Напомнило

[Makaveli]

[likejavascript]

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

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

[Paul_King]

А зачем чекбокс оборачивать в label?

[senia]

Чтоб не мучиться с id и for.

[Paul_King]

По моему убеждению — это как-то нелогично, помещать инпут в подпись, несмотря на удобство.
Для такой верстки вариант всего 1: использовать селектор родительского элемента

input[type=checkbox] ^ label:before {

}
input[type=checkbox]:checked ^ label:before {

}

Но с поддержкой пока плохо.

[Bright]

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

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

Например, чекбокс, скрытый с помощью display: none будет недоступен для перехода Tab'ом. Поэтому на wtfforms.com и в других демках чекбоксы скрывают прозрачностью или иными способами.

[senia]

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

[senia]

Я просто текст «Checkbox» оборачиваю в div. и стилизую уже div. Или можно вообще пустой div после input вставить и все картинки уже в него.

[likejavascript]

Если не трудно набросайте пожалуйста короткий примерчик.

[senia]

Как-то так:

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

label input[type=checkbox] + div:before {
 /*как в статье*/
}

label input[type=checkbox]:checked + div:before {
 /*как в статье*/
}

[likejavascript]

Спасибо

[senia]

Вот пример: jsfiddle.net/ksettzv2/1/

[Bright]

Добавьте внутрь span сразу после input, для него и пишите стили. Пример тут: wtfforms.com/

[devlev]

Статься класс, реально крутые вещи)
Хорошо бы ссылки на примеры добавить самому попробовать все потыкать, а то гифок как то маловато

[Paul_King]

Да, дельная идея с ссылками, спасибо!

[devlev]

А то у меня от некоторых примеров прям слюнки текут, хочется что-то свое дописать к имеющемуся. Но за сами идеи большое спасибо!

[Paul_King]

Добавил ссылку на код первого примера.

[novoselov]

А есть приложение которое делает gif из анимации в html?

[Paul_King]

Неплохая идея) Как найдете, пожалуйста, расскажите)

[Paul_King]

Добавил ссылку на код первого примера.

[Apathetic]

screentogif.codeplex.com/

[Paul_King]

Спасибо, опробуем) Раньше приходилось снимать видео, а потом конвертировать в гиф.

[ImKremen]

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

Кто-то знает почему?
На stackoverflow только догадки stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width

[gz0t]

Как это догадки, там же ответили. Я не ох ты какой переводчик, но вышло, что: высота родителя зависит от высоты детей, отступы детей зависят от высоты родителя. Когда отступы у детей в процентах получается замкнутый круг. И, видимо, получилось «нет времени объяснять», давайте делать :)
Или чтото не так понял?

[Paul_King]

Как я понял, высооты взаимозависимы, и расчет их высоты браузером может вызвать бесконечную рекурсию)

[ImKremen]

Нет там замкнутого круга.
Допустим высота дочернего элемента 100px, а верхнее поле 80%.
Имеем уравнение x=0.8x+100
Получаем x=500.

Высота родителя 500px, дочернего элемента 100px, padding-top 400px.

[Night_Coder]

Неправильно стилизовать чекбоксы?
Т.е. когда на каждой операционке свой чекбокс со своими размерами, это норм?

[Night_Coder]

В метро сейчас, не могу проверить.
Но помнится мне, стилизованные чекбоксы не работают в FF.

[felixexter]

.block {
    transform: translatez(0);
}

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