18 советов по CSS, которые сделают жизнь разработчика проще

Некоторые особенности свойств, классов, псевдоэлементов и других составляющих CSS, о которых вы могли не знать. И парочка советов, чтобы верстать ещё лучше.

Обложка статьи «18 советов по CSS, которые сделают жизнь разработчика проще»

Анимированное руководство по CSS flex

CSS flex — свойство, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Рассмотрим, как оно работает.

Обложка статьи «Анимированное руководство по CSS flex»

Вакансии, где нужны знания CSS

Подборка книг по веб-разработке

Подборка книг для начинающего веб-разработчика

В перечне книг вы найдёте материалы по 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 способов сделать это!

html

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-дерева на веб-странице. Позволяет контролировать все аспекты анимации.

Anime.js

Знакомство с созданием изображений на чистом 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

Прочитав это пошаговое руководство, вы научитесь создавать подсказки к элементам при помощи чистого 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-код, и познакомимся…

Обложка поста