Это редакционная статья нашего последнего информационного бюллетеня HTML / CSS Channel, вы можете подписаться здесь .
Вот наши последние передовые предложения:
- 20+ бесплатных учебных ресурсов от Луи Лазариса
- Новый курс по CSS-анимации Донована Хучинсона
Фронтальные учебные ресурсы
Как передовые разработчики, наша работа — быть в курсе техник и инструментов, которые делают наши конечные продукты простыми в использовании, доступными и, почему нет, красивыми.
Луи Лазарис делится с нами 11-й частью своего списка бесплатных 20+ документов и руководств для разработчиков переднего плана.
Список впечатляет и включает ресурсы по функциональному программированию, ES6, Progressive Web Apps, доступности и многим другим. Не стесняйтесь выбирать свои любимые. Что касается меня, я сразу же ознакомился с CSS-справочником и Книгопечатанием .
Справочник по CSS
Справочник по CSS — это визуальное руководство, в котором свойства CSS организованы в:
- Анимации
- Фон
- Модель коробки
- Flexbox
- позиционирование
- Переходы
- Типография
Вы также можете получить доступ к списку всех свойств CSS в алфавитном порядке.
Руководство объясняет каждое свойство и возможные значения в ясных и простых терминах и предлагает отличные наглядные материалы для иллюстрации результатов.
Типография Справочник
Любой инструмент, который преподает принципы, лучшие практики и код для отличной веб-типографики практичным и доступным способом, имеет мой голос. Мне кажется, что The Typography Handbook делает именно это.
Это проект с открытым исходным кодом на GitHub, охватывающий:
- Типографский дизайн
- шрифты
- Руководство по веб-стилю
В последней части, в частности, показано значительное количество примеров кода, посвященных таким темам, как относительные единицы измерения, вертикальное пространство, размер шрифта, цвет и т. Д.
Если вы обнаружите, что большинство ресурсов по веб-типографии немного устрашающе и жаргонно, The Typography Handbook удивит вас (в хорошем смысле).
Веб-анимация
Мы развились, чтобы действительно хорошо замечать движение. … Наблюдение за движением и визуальными подсказками позволяет нам понимать сложные действия и идеи невербальным способом.
Анимация в сети может быть использована с тем же эффектом и может добавить дополнительную глубину и смысл разговору между нашими пользователями и пользовательским интерфейсом.
Реализация веб-сайтов с помощью CSS-анимации — Донован Хатчинсон и Гай Раутледж
Анимация стала ключевым элементом в веб-дизайне и разработке. Разработчики пользовательского интерфейса учат нас тому, как тонкие эффекты анимации помогают пользователям выполнять задачи на веб-сайте, предотвращают скуку, когда посетители ждут загрузки ресурса, направляют внимание читателей при сканировании веб-контента.
В настоящее время наиболее распространенными способами анимации веб-контента являются:
- CSS переходы и анимация @keyframes
- JavaScript
Чтобы узнать больше о веб-анимации, SitePoint Premium предлагает новый курс — анимация с помощью CSS — от аниматора-рок-звезды Донована Хатчинсона.
Курс охватывает принципы эффективной анимации пользовательского интерфейса и их реализацию с использованием CSS-переходов и @keyframes , функций замедления и синхронизации , нескольких анимаций , анимации при прокрутке , поддержки браузера и доступности .
Если вы предпочитаете статьи, ниже приведены лишь некоторые из моих любимых статей из SitePoint:
- Анимация от мастера CSS . Это расшифровка живых вопросов и ответов SitePoint с Тиффани Браун, представленных Анжелой Молиной
- 4 совета по использованию анимации в дизайне Габриэль Гоша
- Понимание свойства CSS animation-fill-mode Луи Лазариса
- Анимации: Использование упрощений для создания более умных взаимодействий. Автор Daniel Schwarz
- Реализация страниц с помощью API веб-анимации Дадли Стори.
Использование CSS для веб-анимации остается моим предпочтительным способом работы, но бывают случаи, когда вам нужна надежная библиотека JavaScript для выполнения работы.
Для сложных веб-анимаций, требующих решения JS, ознакомьтесь с моей серией Beyond CSS: Dynamic DOM Animation Libraries . Первая часть представляет собой введение в работу с Anime.js, а вторая — о анимации DOM с помощью KUTE.js, модульного движка анимации с открытым исходным кодом и множеством возможностей.
Оставайтесь с нами, больше впереди.
Если у вас есть библиотека анимации JavaScript, которую вы хотели бы увидеть в этой серии, свяжитесь с нами!
Главное изображение предоставлено Unsplash.com