Модный слайдер на CSS
В rss-подписке наткнулась на подборку классных фишек на CSS3. Тут же решила одну из них опробовать.
Модная штука. На Дриббле регулярно вижу подборки UI-элементов в таком стиле.
Разметка совсем простая:
В стилях тоже ничего особенного. Бордер-радиусы, градиенты и т.п.
Интерес тут в другом.
Checkbox hack
При помощи стилей можно хакнуть чекбокс: увеличить, сделать его невидимым и при нажатии на него добавлять псевдо-селекто :checked. И для него уже прописывать соответствующие стили.
Для этого пишем в цсс такое:
.switch input {
/* Делаем чекбокс такой же ширины, как и у контейнера */
position: absolute;
width: 100%;
height: 100%;
/* Ставим его поверх всего остального */
z-index: 100;
/* Протектима инвизибус! =) */
opacity: 0;
/* Просто для удобства */
cursor: pointer;
}
Результат - №7 н моей странице экспериментов.
Адекватно отображается во всех последних версиях браузеров, даже в ИЕ9.
Стили см.в стать Button switches with checkboxes and CSS fanciness
Классный, кстати, журнал. Советую подписаться.
Эта же статья на моем сайте.