Анимация при скролле: Intersection Observer + CSS-переменные
Создаем быструю анимацию при прокрутке без тяжелых библиотек. Intersection Observer + CSS-переменные. Поддержка Progressive Enhancement и настроек доступности.
Всего статей: 8 | Категорий: 4 | Тегов: 7
Создаем быструю анимацию при прокрутке без тяжелых библиотек. Intersection Observer + CSS-переменные. Поддержка Progressive Enhancement и настроек доступности.
Разбираемся, как правильно стилизовать скроллбары в 2026 году. Почему Chrome отключает ::-webkit-scrollbar и как подружить кастомный дизайн с Firefox.
Узнайте, как использовать функции cos() и sin() в CSS для создания адаптивных круговых интерфейсов, радиальных меню и блоков преимуществ без единой строчки JavaScript.
Разбираем концепцию умных поверхностей (surfaces), семантическое именование и автоматическую адаптацию текста к фону
Узнайте, как правильно стилизовать HTML5 тег <progress> с использованием современных CSS-функции Container Queries (cqi). Решаем проблему растягивающегося градиента.
Разбираем несколько способов вставки SVG-иконок на сайт: через img, инлайн и спрайты. Узнайте, как управлять цветом, упростить поддержку и ускорить разработку.
Узнайте, как создать красивый и семантичный спойлер (аккордеон) без JavaScript. Используем нативный HTML-тег <details>, добавляем плавное раскрытие и стилизуем иконку под любой дизайн. Готовые примеры кода для FAQ.
Узнайте, как оптимизировать загрузку шрифтов на сайте и избежать проблем с PageSpeed. В статье сравнивается ручное подключение Inter через .woff2 и современный метод с библиотекой @fontsource-variable, который дал экономию трафика в 5 раз (с 341kb до 65kb). Гайд для frontend-разработчиков.