Курсы для опытных
Новые и популярные
Галерея со скользящим hover-эффектом
Создадим галерею с красивейшим эффектом при наведении. Вы научитесь пользоваться свойством clip-path
, разберётесь с синтаксисом функции inset()
, а также познакомитесь с продвинутой техникой использования :has
.
создатель курса
Круговая диаграмма на чистом CSS
Вы научитесь создавать круговые диаграммы с помощью конических градиентов. Вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
Кнопка со сложной анимацией при наведении
Создадим кнопку с необычным эффектом подъёма и вращения при наведении. Для реализации эффекта будем использовать CSS-трансформации, тени и плавные переходы.
Все курсы
Вёрстка по макету из олимпиады. Часть 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: тени, градиенты, скругления.