Курсы для опытных
Новые и популярные
Галерея со скользящим hover-эффектом
Создадим галерею с красивейшим эффектом при наведении. Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
создатель курса 
Круговая диаграмма на чистом CSS
Вы научитесь создавать круговые диаграммы с помощью конических градиентов. Вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
Кнопка со сложной анимацией при наведении
Создадим кнопку с необычным эффектом подъёма и вращения при наведении. Для реализации эффекта будем использовать CSS-трансформации, тени и плавные переходы.
Все курсы
Вёрстка по макету из олимпиады. Часть 4
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В четвёртой части добавляем версии шапки для планшета и мобильных устройств.
Вёрстка по макету из олимпиады. Часть 3
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В третьей части добавляем стили состояний интерактивных элементов.
Вёрстка по макету из олимпиады. Часть 2
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. Во второй части работаем над сеткой шапки и проверяем её на переполнение.
Вёрстка по макету из олимпиады. Часть 1
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения. В первой части работаем над разметкой и базовой стилизацией шапки.
Посимвольный ввод текста
Создадим JavaScript-компонент, который будет имитировать посимвольный ввод текста. При реализации используем рекурсивную функцию.
Знакомство с сабгридами, subgrid
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
Объёмная иконка в стиле глассморфизма
Разбираемся, как создавать объёмную иконку в стиле глассморфизма. Вы узнаете, как использовать свойства mask и clip-path для «вырезания» элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter.
Свойство cursor
Учимся настраивать внешний вид курсора с помощью свойства cursor. Познакомимся с некоторыми системными курсорами, научимся устанавливать пользовательские курсоры с помощью изображений и управлять их параметрами.
Маски ввода для текстовых полей
Научимся легко и просто создавать маски ввода для популярных форматов данных: номеров телефонов, банковских карт, дат. Познакомимся и с более сложными масками.
Кастомизируемый лоадер
Создадим лоадер, который будет настраиваться с помощью CSS-переменных.
Галерея со скользящим hover-эффектом
Создадим галерею с красивейшим эффектом при наведении. Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
Пульсирующий вертикальный лоадер
Создадим анимированный индикатор загрузки с тремя вертикальными полосами, которые поочерёдно уменьшаются и увеличиваются, создавая эффект пульсации. Лоадер реализован с помощью единственного тега с помощью линейных градинентов.
Вращающийся лоадер
Создадим базовый лоадер из вращающихся лепестков. Используем CSS-переменные для кардинального сокращения и упрощения кода.
Адаптивное оглавление
Создадим оглавление, которое подстраивается под ширину экрана. Реализуем сложный декоративный элемент «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.
Визуализация математических CSS-функций
Оказывается, В CSS есть нативные математические функции. В этой интерактивной визуализации мы познакомимся с ними, порисуем графики, повспоминаем линейную алгебру. Визуализация сделана на чистом CSS.
Sticky headers
Создадим список имён, в котором алфавитные разделители прилипают к верхней части списка при прокрутке. Это хрестоматийный пример использования position: sticky.
Переключение цветовых тем на чистом CSS
Разработаем несколько цветовых схем для сайта, а затем реализуем их переключение на чистом CSS. Ключевую роль в этой технике играет :has.
Адаптивная галерея с «резиной»
Создадим адаптивную галерею с резиновым поведением и фиксированными пропорциями изображений. Ключевую роль играют свойства object-fit и aspect-ratio. Также поэкспериментируем с Container Queries.
Круговая диаграмма на чистом CSS
Вы научитесь создавать круговые диаграммы с помощью конических градиентов. Вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
Индикатор чтения, управляемый прокруткой, на чистом CSS
Рассмотрим как создать индикатор прогресса чтения на чистом CSS с помощью Scroll-driven Animations.
Интерактивный индикатор для поля ввода
Создадим поле ввода с анимированным индикатором, изменяющимся по мере ввода текста. Логику работы индикатора напишем на чистом JavaScript.
Вращающийся 3D-куб
Создадим вращающийся 3D-куб и разберёмся, как работают 3D-трансформации. Своими глазами увидим, какой эффект дают свойства perspective и backface-visibility. Поймём принцип работы множественных трансформаций.
Кнопка со сложной анимацией при наведении
Создадим кнопку с необычным эффектом подъёма и вращения при наведении. Для реализации эффекта будем использовать CSS-трансформации, тени и плавные переходы.
Эффект фотозатвора при наведении
Создадим красивый эффект при наведении, который похож на работу затвора фотоаппарата. Узнаем про абсолютно нестандартный способ применения привычных CSS-теней.
Коллекция кнопок в стиле неоморфизма
Познакомимся с неоморфизомом и разберёмся как реализовывать компоненты в этом стиле. Создадим неоморфные кнопки простой формы, кнопки с рамками, а затем и неоморфные кнопки сложной формы.
Анимированная градиентная рамка
Создадим анимированную градиентную рамку на чистом CSS. На понадобится всего один контейнер, без дополнительных обёрток и псевдоэлементов. Ключевую роль играют свойство background-origin и директива @property.
Пользовательские свойства. Часть 2: значения и разбиение значений
Мы познакомимся с одной из киллер-фич пользовательских свойств. Они позволяют разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.
Пользовательские свойства. Часть 1: Знакомство
Первый раздел интерактивного курса про пользовательские свойства aka «CSS Custom Properties», aka «CSS-переменные», в котором вы познакомимтесь с их синтаксисом и типовыми примерами использования.
Галерея с нестандартным переключением изображений
Создаём галерею с анимированным переключением изображений на CSS-трансформациях. Используем приём с animation-fill-mode: both.
repeating-linear-gradient VS linear-gradient
На примере решения одной и той же задачи исследуем разницу между repeating-linear-gradient и linear-gradient. Исследование предназначено для опытных разработчиков, но будет полезно и начинающим.
Градиентная рамка
Создаём карточку с красивой градиентной рамкой с помощью repeating-linear-gradient.
Фоновая анимация волн
Создаём фоновую анимацию с волнами на чистом CSS. Используем для этого семейство свойств animation.
Мастерская: анимированный звездопад на чистом CSS
Пошагово, с понятным объяснением каждого шага, создадим анимированный звездопад на чистом CSS. Этот эффект можно использовать в качестве фона для промо-блоков и навигационных блоков.
Мастерская: карточка с анимацией 3D-переворота
С помощью семейства свойств transform и свойства backface-visibility создаём карточку, которая красиво переворачивается в 3D при наведении. А затем с помощью анимаций разберём принцип работы этого 3D-эффекта.
Псевдокласс :has — знакомство
Псевдокласс :has позволяет применять разные стили к элементу в зависимости от его содержания или состояния. Давайте разберём простейший кейс стилизации с помощью :has.
Миллиметровка на CSS
С помощью линейных CSS-градиентов и множественных фоновых изображений создаём сложный фон, напоминающий миллиметровую бумагу.
Разбираются linear-gradient, background-position, background-size. Демонстрируется, как работают множественные фоны.
Использование псевдокласса :nth-child
Разбираемся с использованием псевдоклассов :nth-child и :nth-of-type, которые позволяют выбирать элементы по их порядковому номеру.
Погружаемся в синтаксис :nth-child(an + b), приводим примеры создания простых, сложных и комбинированных выборок элементов, даём примеры расчётов порядковых номеров для этих выборк.
Progressive enhancement на примере формы входа
В этой демонстрации создаётся простая, но красивая форма входа в соответствии с подходом «прогрессивное улучшение» (progressive enhancement).
Используются новые селекторы и свойства CSS3: тени, градиенты, скругления.