В этом курсе вы попытаетесь понять основы CSS и научитесь использовать его для стилизации веб - страниц. В конце этого курса вы сможете создать простую веб - страницу с использованием CSS.
100 labs
Start with Pet's House
CSS Fundamentals
Layout and Positioning
Техника clearfix в CSS
Техники центрирования элементов с использованием flexbox для адаптивного дизайна
Мастерство в центрировании сетевого макета
Выравнивание элементов по вертикали и горизонтали
Центрирование с использованием display: table
Равномерно распределенные дочерние элементы
Создание адаптивных макетов из плиток
Основы стилизации с CSS
CSS для адаптивного контейнера с заданным соотношением сторон
Постоянное соотношение ширины к высоте
Подгонка изображения под контейнер
Список с закреплёнными заголовками секций
Адаптивный макет с боковой панелью
Доступное скрытие элементов за пределами экрана
Стилизация элементов в полноэкранном режиме с использованием CSS
Text and Typography
Обрезка текста с использованием overflow в CSS
Обрезание многострочного текста
Стилизованные кавычки
Создание эффектов гравюровки текста с использованием CSS
Реактивная жидкая типографика с использованием CSS
Создание текста с градиентом с использованием CSS
Настройка выделения текста
Стильная техника Drop Cap
Обрезание многострочного текста
Красивое подчёркивание текста
Отключить выбор содержимого с помощью CSS
Счетчики вложенных списков с использованием CSS
Visual Effects and Patterns
Руководство для начинающих по основам CSS
Техники стилизации CSS для веб-разработки
Граница с верхним треугольником
Узор фона шахматной доски
Паттерн полос на фоне
Шаблон фона в стиле «пузырьки»
Зигзагообразный фон
Создание разделителей форм с использованием CSS
Создание динамических тени с использованием CSS
Градиент прокрутки при переполнении
Скрыть полосы прокрутки
Настройка стилей полосы прокрутки с использованием CSS
Наложение текста на изображение
Список с полосами как у зебры
Эффект CSS Прозрачность соседних элементов
Основы CSS для визуально привлекательных веб-страниц
Создание визуально привлекательных веб-версток
Адаптивная изображённая мозаика
Advanced Interactions and Animations
Создание интерактивного выпадающего меню на CSS
Горизонтальный скроллинг с зацеплением
Вертикальное скроллирование с зацеплением
Полоса прогресса прокрутки
Улучшение интерактивности форм с использованием:focus-within CSS
Показывать дополнительный контент при наведении курсора
Анимация заполнения кнопки
Анимация увеличения кнопки
Анимация уменьшения кнопки
Создание анимации загрузчика с эффектом импульса с использованием CSS
CSS-технологии для визуально привлекательных дизайнов
Анимация увеличения и уменьшения (Zoom in Zoom Out)
Анимация границы кнопки
Анимация теневой рамки при наведении курсора
Вращение изображения при наведении курсора
Гладкий переход динамических высот
Перспективное преобразование при наведении курсора
Основы CSS для стилизации веб-страниц
Эффект наведения на ссылку Squiggle Link
Реактивный дизайн веб-страниц с использованием CSS
Анимация списка элементов с задержкой в CSS
Создание переключателя с использованием CSS
Галерея изображений с вертикальной прокруткой
Карточка с вырезанной картинкой
Анимация кнопки при наведении курсора
Создание вращающейся карточки с использованием CSS
Галерея изображений с горизонтальной прокруткой
Анимация подчеркивания при наведении курсора
Меню при наведении на изображение
Эффект наведения курсора и фокуса на элементы списка навигации
Кастомная радиокнопка
Отслеживание градиента курсора мыши
Создание эффекта машинного пишущего с использованием HTML, CSS и JavaScript
Список с плавающими заголовками разделов
CSS-анимация прыгающего лоадера
3D Вращающийся куб
Наложение изображения при наведении курсора
Анимированные кнопки социального разделения с использованием CSS
Стилизация анимированных чекбоксов с использованием CSS
Респонсивный макет кирпичного стиля с использованием CSS
Изображение с надписью
Тряска при недействительном вводе
Резервный вариант для изображений, которые не загружаются
Ввод с префиксом
Скрыть пустые элементы
Стилизация ссылок без текста
Исследовать связанные деревья навыков
Web Development
Прогресс: 0 из 28 навыков CSS получено
Выполнено 0
Заблокировано 28
Присоединяйтесь к нашему Discord и учитесь вместе
Присоединиться сейчас
