Pull to refresh
0
0
Евгений @z00m

Frontend developer

Send message

Шлифуем CSS-анимацию

Reading time 8 min
Views 27K
Создание CSS-анимации может выглядеть как простое изучение синтаксиса, но для создания красивой и интуитивной анимации нужны определенные тонкости. Так как анимация привлекает достаточно много внимания, крайне важно привести код в порядок, чтобы хронометраж действовал правильно, и отладить все, что работает неправильно. После того, как я сама разобралась с этой проблемой, я решила собрать несколько инструментов, которые могут помочь в этом процессе.

Использование значений отрицательной задержки


Скажем, у вас есть несколько анимаций, которые запускаются одновременно, и вам нужно выстроить их в шахматном порядке. Можно использовать animation-delay, но вы не хотите, чтобы пользователь при посещении страницы ждал, пока запустятся некоторые недвижимые части.
Читать дальше →
Total votes 18: ↑14 and ↓4 +10
Comments 3

GitHub's CSS

Reading time 7 min
Views 15K
[Прим. перев.]: предлагаю вашему вниманию перевод статьи Марка Отто, разработчика GitHub, бывшего разработчика Twitter, создателя самого известного CSS фреймворка Bootstrap. В этой статье он рассказывает о внутреннем устройстве CSS проектов GitHub.


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

Несколько фактов


Обзор нашего текущего состояния CSS:

  • В качестве препроцессора мы используем SCSS.
  • У нас есть более 100 отдельных исходных файлов стилей, которые мы компилируем перед выкаткой в продашн.
  • Исходники компилируются в 2 отдельных CSS файла (чтобы избежать проблемы с максимальным количеством селекторов для IE<10).
  • Эти 2 файла весят в сумме около 90 kb.
  • Мы не используюм какую-нибудь особенную «CSS архитектуру».
  • Для определения размера мы выбрали пиксели, но все же у нас есть немного «em-ов».
  • Мы используем Normalize.css, смешанный с несколькими нашими собственными стилями для сброса свойств.

Читать дальше →
Total votes 36: ↑35 and ↓1 +34
Comments 17

Information

Rating
Does not participate
Location
Самара, Самарская обл., Россия
Registered
Activity