Чёрная магия трансформов, или об оптимизации анимаций на CSS

Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет

читать далее

[Перевод] Разбираемся в анимациях и временных переходах в CSS

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

читать далее

[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается

читать далее

[Перевод] Как написать собственное свойство CSS

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией.

читать далее

[Перевод] Как сделать Змейку на чекбоксах и не только

В допандемическом 2020 Брайан Браун отправился на неделю в Recurse Center и разработал Checkboxland. Эта библиотека JavaScript отображает текст и анимацию на сетке флажков. К забавному маленькому

читать далее

[Перевод] Более 15 полезных инструментов для фронтендера с уклоном в CSS

К старту курса по Frontend-разработке делимся переводом подборки различных инструментов: от генератора CSS, который рассчитывает пространство так, что брейкпоинты (контрольные точки) заменяются

читать далее

[Перевод] Анализ производительности CSS-анимаций

Что выбрать для анимирования элементов веб-страниц? JavaScript или CSS? Этот вопрос однажды вынужден будет задать себе каждый веб-разработчик. А может — и не однажды. JavaScript-программисты создали

читать далее

[Перевод] CSS Houdini: практическое руководство

Доброго времени суток, друзья! Что такое Houdini? Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут

читать далее

Разбираемся с переменными в CSS на реальном примере

Доброго времени суток, друзья! Однажды веб серфинг привел меня к этому замечательному коду. «Замечательность» его (то бишь кода) состоит в практическом использовании переменных в CSS, что сильно

читать далее

[Перевод] Знакомимся с Web Animations API

Доброго времени суток, друзья! Представляю Вашему вниманию перевод статьи Charlie Gerard «Exploring the Web Animations API». Знакомимся с Web Animations API Веб API постоянно эволюционируют.

читать далее

Создаем анимированное слайдшоу на чистом CSS

Доброго времени суток, друзья! Устал от JS, переключись на CSS! Задача Сделать анимированное слайдшоу средствами CSS. Слайдшоу можно использовать, например, в торжественных случаях для вывода фото на

читать далее

Новогодний стикер с Сантой

Продолжаем украшать сайт, добавляя тематические вставки. В этот раз через раздел управление рекламой добавим на сайт виджет/стикер с Сантой.

читать далее