Как сделать текст градиентом — простой CSS-трюк
C помощью двух свойств можно сделать градиентом любой текст на странице. А ещё заливка меняется в зависимости от ширины экрана!
Больше недели назад
На GitHub опубликовали набор для создания современных сайтов весом менее 2 КБ
CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
Можно создать слайдер и даже реализовать полноэкранную прокрутку на чистом CSS. Это отлично работает на мобильных устройствах!
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Задавались когда-нибудь вопросом, как работает CSS Flexbox? Наглядно объясняем возможности технологии с использованием анимации.
Кастомные свойства в CSS. Часть 3: ограничения
В последней статье серии рассмотрены ограничения кастомных свойств CSS.
Кастомные свойства в CSS. Часть 2: особенности применения
Во второй статье серии мы подробнеее рассмотрим наследование значений кастомных свойств.
Кастомные свойства в CSS. Часть 1: что это такое и как работает
В первой статье из серии мы познакомимся с основами кастомных свойств, которых будет достаточно, чтобы начать с ними экспериментировать.
Хотел кликнуть, но не смог: как правильно настроить размер области клика
Рассматриваем несколько распространённых проблем с UX и показываем, с какой из них столкнулись сами и как её решали.
Обучение веб-разработке на практике: пишем слайдер на JavaScript
Обучение веб-разработке даётся проще, если к теории подключена практика. Предлагаем попрактиковаться на слайдере без использования сторонних библиотек.
Разбираем CSS в новом дизайне Facebook: легаси, неочевидные решения и ответы разработчиков
Разбираем CSS-файл обновлённого Facebook’а и пытаемся разобраться, какие решения для нового дизайна выбрали разработчики и почему.
Что нужно знать, чтобы стать веб-разработчиком: интерактивная карта со ссылками на ресурсы для изучения
Roadmap для веб-разработчика: пригодится, чтобы организовать своё обучение или просто посмотреть полезные ресурсы. Круто оформлено. Кликабельно.
Перестаньте использовать !important. Помогаем разобраться с каскадом CSS
Почему ваши CSS-правила иногда не работают, зачем на самом деле нужен !important и как работает каскад CSS — рассказываем в статье.
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. Отличный вводный материал для начинающих веб-разработчиков.
12
