Лайфхаки | VERSTKA

Как увеличить размер чекбокса и радиопки

Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть

Картинка вместо чекбокса

Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.

Как прятать

Когда display: none, а когда visibility: hidden? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.

CSS свойство background-image как антипаттерн

CSS свойство background-image позволяет нам делать крутые вещи, но в большинстве случаев наступило время оставить его позади.

Интересный и одновременно простой слайдер на чистом CSS3

Простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовния javascript.

Размытие отдельных областей изображения в CSS

В этом руководстве мы узнаем, как создать эффект размытого изображения с помощью фильтров CSS. А также как ограничить размытие в конкретной области изображения.

Безопасная верстка для iPhone X / XS / XR

Разбор новой спеки CSS Environment Variables, которая находится в состоянии Editor’s draft. Поговорим про использование мета-тега и значений env(), safe-area-inset-*

Меню бургер за 10мин для начинающих!

В этом видео мы сделаем очень простое бургер-меню для сайта, которое в дальнейшем вы сможете стилизовать и улучшать по своему усмотрению. Меню адаптируется под мобильные устройства. Анимируется сама иконка, из бургера она превращается в крестик. Навигация всегда прижата к верхней … Continued

Кнопка “Показать ещё” без косяков

В этом видео мы рассмотрим как управлять контентом на странице с помощью JS. Будем его скрывать и показывать на разных разрешениях экрана. Создадим кнопку, которая будет этим управлять и она не будет зависеть от кол-ва контента!

Отзывчивый размер шрифта

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport