18 советов по CSS, которые сделают жизнь разработчика проще
Некоторые особенности свойств, классов, псевдоэлементов и других составляющих CSS, о которых вы могли не знать. И парочка советов, чтобы верстать ещё лучше.
Анимированное руководство по CSS flex
CSS flex — свойство, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Рассмотрим, как оно работает.
Подборка книг для начинающего веб-разработчика
В перечне книг вы найдёте материалы по JavaScript, Node.js, React.js, CSS, HTML, паттернах проектирования и адаптивному веб-дизайну.
Развёрнутое руководство по Sass/SCSS
Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете…
Функциональный CSS: упрощаем работу со стилями
Развитие браузеров ограничивало развитие CSS. И примерно с 2015 года (когда браузеры стали поддерживать flexbox) появилась возможность применить новые технологии в приложениях и на сайтах. На помощь пришли библиотеки Angular Material…
Основы CSS: блочная модель
Блочная модель CSS — одна из основ веб-дизайна, которая в дальнейшем помогает лучше кастомизировать страницы. Разбираемся, как она устроена.
Верстаем правильно: знакомство с Flexbox и Grid
Знакомство с CSS-вёрсткой в 2018 году. Рассказываем, как использовать Flexbox и Grid для создания красивой разметки и чем они лучше старых методов.
Создаём простую игру на Vanilla JS
В этой статье мы напишем простую игру с помощью HTML, CSS и чистого JavaScript — никаких фреймворков, только хардкор.
Вредные советы по CSS
Презираете комментарии и не придумываете имена, когда пишете CSS? Рассказываем, как и зачем бороться с этими и другими типичными ошибками.
5 способов выровнять HTML-элемент горизонтально и вертикально
Устали искать способ вертикально и горизонтально выровнять HTML-элемент? В этой статье мы собрали целых 5 способов сделать это!
16 генераторов CSS-кода для веб-разработчиков
Генераторы кода могут быть как источниками новых проблем, так и путями их решения. Всё-таки у них больше плюсов, чем минусов: экономия времени, довольно качественный результат и почти всегда всё бесплатно. Поэтому мы подготовили для вас 16 генераторов CSS-кода.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 4
Продолжение серии обучающих статей по работе с Anime.js. В финальной части будут описаны различные обратные вызовы (callback-функции), используемые для выполнения функций в зависимости от прогресса анимации.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 3
Продолжение серии статей обучающих статей по работе с Anime.js. В этой статье речь пойдёт о том, как научиться устанавливать значения свойств, используя обычные числа, значения на основе функций и ключевые кадры. Также вы научитесь регулировать воспроизведение и последовательность анимаций.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2
Продолжение серии обучающих статей по работе с Anime.js. В этой части вы узнаете, как использовать Anime.js для правильного тайминга анимации разных элементов, используя определённые параметры.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
С помощью Anime.js можно анимировать свойства CSS, SVG-изображения или атрибуты DOM-дерева на веб-странице. Позволяет контролировать все аспекты анимации.
Знакомство с созданием изображений на чистом CSS. Часть третья, продвинутая
Продолжение руководства по созданию изображений на чистом CSS. В этом руководстве будет рассмотрена возможность создания интерактивных картинок на CSS с использованием Vue.js. Мы создадим рабочий стол разработчика с интерактивными элементами.
Знакомство с созданием изображений на чистом CSS. Часть вторая, посложнее
Продолжение руководства по созданию изображений на чистом CSS. Теперь мы рады представить вам перевод второй части, в которой вы научитесь создавать баннер на CSS.
Начало работы с CSS Grid Layout: подборка полезных ресурсов и руководств
CSS Grid Layout — один из самых обсуждаемых инструментов верстальщиков на данный момент. Однако он не является чем-то очень новым. Дело в том, что система приобрела поддержку самых известных браузеров:…
Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами
Наверняка каждый, кто работал с CSS, не раз впадал в отчаяние. Например, когда пытался отцентрировать дочерний элемент по отношению к родительскому, что является весьма нетривиальной задачей. В этой статье мы…
Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox
Рассказываем, как создать горизонтально прокручиваемую секцию веб-странички при помощи Flexbox. Спойлер: это очень просто.
Знакомство с анимацией в CSS3: гайд для начинающих
В этой статье мы рассказываем об основах использования анимации в CSS3. Отличный вводный материал для начинающих веб-разработчиков.
Сатирические зарисовки на тему CSS, или Cюрпризы фронтенд-разработки
Делимся списком самых больших сюрпризов, которые CSS может преподнести начинающему веб-разработчику, и рассказываем, как к ним подготовиться.
Пошаговое руководство по созданию подсказок на чистом CSS
Прочитав это пошаговое руководство, вы научитесь создавать подсказки к элементам при помощи чистого CSS, без добавления HTML-элементов или JS-кода.
Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих
Рассказываем об основах создания изображений на чистом CSS. Вы нарисуете прелестного коалу, а затем сможете пройти бесплатный обучающий курс от автора.
Курс «CSS: Flexbox»
В этом видеокурсе рассказывается о Flexbox — наборе свойств CSS, которые позволяют создавать по-настоящему гибкие макеты независимо от размера элементов.
Идеальная 3-колоночная вёрстка средствами CSS
Самое правильное руководство по созданию трехколоночной верстки средствами CSS. Материал от нашего подписчика.
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Flexbox предназначен для более гибкого выравнивания элементов на веб-странице. Он значительно упрощает многие вещи, которые раздражают вас в чистом CSS.
Лучшие проекты, в которых стоит поучаствовать, чтобы примкнуть к Open Source движению и развить свои навыки. Часть первая. Веб-разработка
Если вы интересуетесь жизнью Open Source сообщества и хотите к нему присоединиться, то эта серия подборок (которую мы продолжаем пополнять) придётся вам как нельзя кстати, ведь в ней собраны лучшие проекты…
Знакомство с впечатляющими возможностями SVG-анимаций: пишем небольшую игру
Рассказывает Грэг Хованесян Идея игры Я уже достаточно давно знаком с SVG-анимациями и хорошо понимаю, как можно их использовать для создания анимированных спрайтов или дизайна веб-страниц. Такое сочетание, как GreenSock и…
Создаём Солнечную систему на чистом CSS3. Часть третья. 3D-преобразования
В этой статье мы закончим разбираться в принципах создания анимированной Солнечной системы на CSS3. В этот раз мы реализуем трёхмерный вид нашей системы. …
Создаём Солнечную систему на чистом CSS3. Часть вторая. Кейфреймы и тени
В этой статье мы продолжим разбираться в принципах создания анимированной Солнечной системы на CSS3. Мы рассмотрим использование keyframe-анимации для движения планет по орбитам вокруг Солнца и реализуем динамические тени на планетах. …
Создаём Солнечную систему на чистом CSS3. Часть первая. Начальный этап, готовим сцену и фон
Анимированная Солнечная система на демке ниже — это настоящее произведение искусства. В этом цикле статей мы подробно рассмотрим все этапы её создания, шаг за шагом разобрав весь CSS-код, и познакомимся…
12
