Быстрый старт с CSS
Начинающий
В этом курсе вы попытаетесь понять основы CSS и научитесь использовать его для стилизации веб - страниц. В конце этого курса вы сможете создать простую веб - страницу с использованием CSS.
cssweb-development
💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
- Введение
- Программа
Начало работы с «Домиком питомца»
Основы CSS
Макет и позиционирование
Техника clearfix в CSS
Техники центрирования элементов с использованием flexbox для адаптивного дизайна
Мастерство в центрировании сетевого макета
Выравнивание элементов по вертикали и горизонтали
Центрирование с использованием display: table
Равномерно распределенные дочерние элементы
Создание адаптивных макетов из плиток
Основы стилизации с CSS
CSS для адаптивного контейнера с заданным соотношением сторон
Постоянное соотношение ширины к высоте
Подгонка изображения под контейнер
Список с закреплёнными заголовками секций
Адаптивный макет с боковой панелью
Доступное скрытие элементов за пределами экрана
Стилизация элементов в полноэкранном режиме с использованием CSS
Текст и типографика
Обрезка текста с использованием overflow в CSS
Обрезание многострочного текста
Стилизованные кавычки
Создание эффектов гравюровки текста с использованием CSS
Реактивная жидкая типографика с использованием CSS
Создание текста с градиентом с использованием CSS
Настройка выделения текста
Стильная техника Drop Cap
Обрезание многострочного текста
Красивое подчёркивание текста
Отключить выбор содержимого с помощью CSS
Счетчики вложенных списков с использованием CSS
Визуальные эффекты и паттерны
Руководство для начинающих по основам CSS
Техники стилизации CSS для веб-разработки
Граница с верхним треугольником
Узор фона шахматной доски
Паттерн полос на фоне
Шаблон фона в стиле «пузырьки»
Зигзагообразный фон
Создание разделителей форм с использованием CSS
Создание динамических тени с использованием CSS
Градиент прокрутки при переполнении
Скрыть полосы прокрутки
Настройка стилей полосы прокрутки с использованием CSS
Наложение текста на изображение
Список с полосами как у зебры
Эффект CSS Прозрачность соседних элементов
Основы CSS для визуально привлекательных веб-страниц
Создание визуально привлекательных веб-версток
Адаптивная изображённая мозаика
Продвинутые взаимодействия и анимации
Создание интерактивного выпадающего меню на 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
Изображение с надписью
Тряска при недействительном вводе
Резервный вариант для изображений, которые не загружаются
Ввод с префиксом
Скрыть пустые элементы
Стилизация ссылок без текста
Преподаватель
Labby
Labby is the LabEx teacher.
Поделиться в Google Classroom
Присоединяйтесь к нашему Discord и учитесь вместе
Присоединиться сейчасОтзывы пользователей
" Merci beaucoup à toute l'équipe"
— Kokou Emmanuel WOEKPOR
" Excelente a forma de interagir e aprender .. Valeu equipe La"
— José Luis Amancio
Рекомендовано для вас

