Примеры CSS
- Предыдущая страница Сетевые элементы CSS
- Следующая страница Тест CSS
Выборщики CSS
Использование CSS
Комментарии CSS
Цвета CSS
Фон CSS
- Установить цвет фона страницы
- Установить цвет фона различных элементов
- Использовать изображение в качестве фона страницы
- Как повторить фоновое изображение только в горизонтальном направлении
- Как расположить фоновое изображение
- Фиксированное фоновое изображение (изображение не будет прокручиваться вместе с остальной частью страницы)
- Все атрибуты фона в одном заявлении
- Уровень продвинутого примера фона
Рамка CSS
- Установить ширину всех четырех рамок
- Установить ширину верхней рамки
- Установить ширину нижней рамки
- Установить ширину левой рамки
- Установить ширину правой рамки
- Установить стиль всех четырех рамок
- Установить стиль верхней рамки
- Установить стиль нижней рамки
- Установить стиль левой рамки
- Установить стиль правой рамки
- Установить цвет всех четырех рамок
- Установить цвет верхней рамки
- Установить цвет нижней рамки
- Установить цвет левой рамки
- Установить цвет правой рамки
- Все рамочные атрибуты в одном заявлении
- Добавление груглых краев к элементу
- Установить различную рамку для каждого края
- Все верхние рамочные атрибуты в одном заявлении
- Все нижние рамочные атрибуты в одном заявлении
- Все левые рамочные атрибуты в одном заявлении
- Все правые рамочные атрибуты в одном заявлении
Отступ CSS
- Установить различный отступ для каждого края элемента
- Использование сокращенного отступа с четырьмя значениями
- Использование сокращенного отступа с тремя значениями
- Использование сокращенного отступа с двумя значениями
- Использование сокращенного отступа с одним значением
- Установить отступ auto, чтобы-centered элементы внутри его контейнера
- Перенять левый отступ от родительского элемента
- Слияние отступов
Внутренний отступ CSS
- Установить различный отступ для каждого края элемента
- Использование сокращенного отступа с четырьмя значениями
- Использование сокращенного отступа с тремя значениями
- Использование сокращенного отступа с двумя значениями
- Использование сокращенного отступа с одним значением
- Отступ и ширина элемента (не устанавливать box-sizing)
- Отступ и ширина элемента (установить box-sizing)
- Установить левый отступ элемента
- Установить правый отступ элемента
- Установить верхний отступ элемента
- Установить нижний отступ элемента
CSS высота/ширина
CSS блоковая модель
Контуры CSS
Текст CSS
- Настройка цвета текста для различных элементов
- Выравнивание текста
- Удаление линии под ссылкой
- Оформление текста
- Контроль размера букв в тексте
- Отступ текста
- Определение интервала между символами
- Определение межстрочного интервала
- Настройка текстового направления элемента
- Увеличение интервала между символами
- Определение текстового тени элемента
- Запрет переноса текста в элементе
- Вертикальное выравнивание изображения в тексте
Шрифты CSS
Ссылки CSS
Списки CSS
Таблицы CSS
- Определение черного края table, th и td элементов
- Использование border-collapse
- Окантовка одной стороны таблицы
- Определение ширины и высоты таблицы
- Настройка горизонтального выравнивания содержимого (text-align)
- Настройка вертикального выравнивания содержимого
- Определение внутреннего отступа th и td элементов
- Горизонтальный разделитель
- Перемещаемая таблица
- Столбцовая таблица
- Определение цвета рамки таблицы
- Настройка положения заголовка таблицы
- Респонсивные таблицы
- Создание красивых таблиц
CSS-показ
CSS-локализация
- Размещение элементов относительно окна браузера
- Размещение элементов относительно их нормального положения
- Абсолютная定位ация элементов
- Клеевая定位ация
- Перекрытие элементов
- Настройка формы элемента
- Установка верхней границы изображения с помощью значений пикселей
- Установка нижней границы изображения с помощью значений пикселей
- Использование пиксельных значений для установки левого края изображения
- Использование пиксельных значений для установки правого края изображения
- Позиционирование изображения текста (в левом верхнем углу)
- Позиционирование изображения текста (в правом верхнем углу)
- Позиционирование изображения текста (в левом нижнем углу)
- Позиционирование изображения текста (в правом нижнем углу)
- Позиционирование изображения текста (по центру)
CSS Переполнение
- Использование overflow: visible - переполнение не обрезается. Оно рендерится за пределами рамки элемента.
- Использование overflow: hidden - переполнение обрезается,其余 контент скрыт.
- Использование overflow: scroll - переполнение обрезается, но добавлен ползунок для просмотра其余 контента.
- Использование overflow: auto - если было обрезано переполнение, то следует добавить ползунок для просмотра其余 контента.
- Использование overflow-x и overflow-y
CSS Плавание
- Простое использование свойства float
- Изображение с рамкой и внешними отступами,浮动 направо от абзаца
- Изображение с заголовком,浮动 направо
- Левое浮动 первой буквы абзаца
- Закрытие плавания (использование свойства clear)
- Закрытие плавания (использование хака clearfix)
- Создание плавающих рамок
- Создание выравненных изображений
- Создание рамок одинаковой высоты (через flexbox)
- Создание горизонтального меню
- Пример создания веб-дизайна
CSS Inline-block
Выравнивание элементов CSS
- Центрирование через внешние отступы
- Центрирование текста
- Центрирование изображения
- Левое и правое выравнивание через position
- Левое и правое выравнивание через position - кросс-браузерный метод
- Левое и правое выравнивание через float
- Левое и правое выравнивание через float - кросс-браузерный метод
- Вертикальное выравнивание через padding
- Вертикальное и горизонтальное выравнивание
- Вертикальное выравнивание через line-height
- Вертикальное и горизонтальное выравнивание через position
CSS комбинаторы
Пseudo-классы CSS
- Добавление другого цвета для ссылки
- Добавление других стилей для ссылки
- Использование :focus
- :first-child - Совпадает с первым элементом p
- :first-child - Совпадает с первым элементом i в любом подэлементе p
- :first-child - Совпадает с любыми элементами i, находящимися в первом подэлементе p
- Использование :lang
Пseudo-элементы CSS
Создание контента CSS
Непрозрачность CSS
Меню навигации CSS
- Вертикальная навигационная панель с полным стилем
- Горизонтальная навигационная панель с полным стилем
- Фиксированная полная высоты вертикальная навигационная панель
- Фиксированная горизонтальная навигационная панель
- Прилипающая навигационная панель (не работает в IE или Edge 15 и более ранних версиях)
- Респонсивная верхняя панель навигации
- Респонсивная боковая панель навигации
Выпадающий список CSS
Библиотека изображений CSS
Изображение спрайта CSS
Селекторы свойств CSS
- Выберите все элементы <a> с атрибутом target
- Выберите все элементы <a> с атрибутом target="_blank"
- Выберите все элементы с атрибутом title, содержащим список слов, одним из которых является "flower"
- Выберите все элементы с классом, начинающимся на "top" (должен быть целым словом)
- Выберите все элементы с классом, начинающимся на "top" (не может быть целым словом)
- Выберите все элементы с классом, заканчивающимся на "test"
- Выберите все элементы с классом, содержащим "te"
Формы CSS
- Полное ширины входное поле
- Заливное входное поле
- Входное поле с рамкой
- Входное поле с нижней рамкой
- Входное поле с цветом
- Входное поле с фокусом
- Входное поле с фокусом 2
- Входное поле с иконкой
- Поисковая строка с анимацией
- Настройка стиля текстового поля
- Настройка стиля списка выбора
- Настройка стиля кнопки
- Респонсивная форма
Макет веб-сайта CSS
Круглые углы CSS
Изображение рамки CSS
Фон CSS
- Добавление нескольких фоновых изображений к элементу
- Определение размера фонового изображения
- Использование "contain" и "cover" для масштабирования фонового изображения
- Определение размера фонового изображения
- Полное фоновое изображение (полностью покрывает область содержимого)
- Использование background-origin для определения места размещения фонового изображения
- Использование background-clip для определения области рисования фона
Градиенты CSS
- Линейный градиент - сверху вниз
- Линейный градиент - слева направо
- Линейный градиент - диагональ
- Линейный градиент - определенный угол
- Линейный градиент - несколько цветных меток
- Линейный градиент - радуга + текст
- Линейный градиент - прозрачность
- Линейный градиент - повторяющийся линейный градиент
- Радиальный градиент - равномерное распределение цветных меток
- Радиальный градиент - различное расстояние между цветными метками
- Радиальный градиент - настройка формы
- Радиальный градиент - различные размеры ключевых слов
- Радиальный градиент - повторяющийся радиальный градиент
Эффект тени CSS
- Простые тени
- Добавление цвета к тени
- Добавление размытия к тени
- Белый текст с черной тенью
- Розовые неоновые тени
- Розовые и синие неоновые тени
- Белый текст с черными, синими и темно-синими тенями
- Добавление простого box-shadow к элементу
- Добавление цвета к box-shadow
- Добавление цвета и размытия к box-shadow
- Создание карты-карточки (текст)
- Создание карты-карточки (изображение Polaroid)
Эффекты текста CSS
- Определяет, как пользователям следует呈现 не отображаемое содержимое
- Как будет отображаться содержимое, которое выходит за пределы элементов, когда мышь悬еняется над ними
- Разрешает длинные тексты быть обрезанными и перенесенными на следующую строку
- Определяет правила переноса строк
- Определяет стиль написания текста (по горизонтали или по вертикали)
CSS веб-шрифт
CSS 2D преобразования
- translate() - Удаление элемента из текущего положения
- rotate() - Вращение элемента по часовой стрелке
- rotate() - Обратное вращение элемента
- scale() - увеличение элементов
- scale() - уменьшение элементов
- skewX() - наклон элементов по оси X
- skewY() - наклон элементов по оси Y
- skew() - наклон элементов по осям X и Y
- matrix() - вращение, масштабирование, перемещение и наклон элементов
CSS 3D преобразования
CSS переходы
CSS анимации
- Привязка анимации к элементу
- Анимация - Изменение фона элемента
- Анимация - Изменение фона и位置的 элемента
- Задержка анимации
- Анимация выполняется три раза до остановки
- Анимация, выполняемая всегда
- Анимация, выполняемая в обратном направлении
- Анимация, чередующаяся по очереди
- Кривая скорости анимации
- Краткое свойство анимации
CSS инструментальные подсказки
Изображение с CSS стилем
- Изображение с закругленными углами
- Круглое изображение
- Эскиз
- Эскиз в качестве ссылки
- Адаптивные изображения
- Текст изображения (в левом верхнем углу)
- Текст изображения (в верхнем правом углу)
- Текст изображения (в левом нижнем углу)
- Текст изображения (в верхнем правом углу)
- Текст изображения (по центру)
- Изображение Polaroid
- Фильтр изображения в градациях серого
- Уровень 2 - Изображение модального окна, реализованное с помощью CSS и JavaScript
CSS Object-fit
CSS кнопки
- Основная кнопка CSS
- Цвет кнопки
- Размер кнопки
- Круглая кнопка
- Контур кнопки с цветом
- Кнопка, которую можно навести
- Кнопка с тенью
- Недоступная кнопка
- Ширина кнопки
- Группа кнопок
- Группа кнопок с рамкой
- Кнопка с анимацией (эффект наведения)
- Кнопка с анимацией (эффект нажатия)
- Кнопка с анимацией (эффект волн)
CSS разбиение на страницы
- Простая страничка
- Активная страничка, которую можно навести
- Активная страничка с закругленными углами, которую можно навести
- Эффект перетаскивания, который можно навести
- Страничка с рамкой
- Страничка с закругленными углами и рамкой
- Страничка с пробелом между ссылками
- Размер странички
- Страничка, выровненная по центру
- Меню навигации
CSS многостолбцы
- Создание много столбцов
- Определение интервала между столбцами
- Определение стиля правил между столбцами
- Определение ширины правил между столбцами
- Определение цвета правил между столбцами
- Определение правил ширины, стиля и цвета между столбцами
- Определение того, сколькими столбцами должен перекрываться элемент
- Определение оптимальной ширины столбца
CSS пользовательский интерфейс
Свойства CSS
Box Sizing в CSS
CSS гибкий контейнер
- Гибкий контейнер с тремя гибкими элементами
- Гибкий контейнер с тремя гибкими элементами - в направлении rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Сортировка гибких элементов
- Margin-right:auto;
- Margin:auto; = идеальное центрирование
- Настройка align-self для гибкого элемента
- Определение длины гибкого элемента, по отношению к другим частям гибкого элемента
- Создание адаптивной галереи изображений с помощью flexbox
- Создание адаптивного веб-сайта с помощью flexbox
Медиа-запросы CSS
Медиа-запросы CSS - дополнительные примеры
- Настройка фона в зависимости от ширины экрана
- Адаптивное меню навигации
- Адаптивные колонки с использованием浮动
- Адаптивные колонки с использованием flexbox
- Скрытие элементов через медиа-запросы
- Адаптивные размеры шрифтов
- Адаптивные библиотеки изображений
- Адаптивные веб-сайты
- Изменение макета страницы в зависимости от ориентации браузера
- Минимальная ширина до максимальной ширины
Адаптивный дизайн веб-страниц CSS
Сетка CSS
- Предыдущая страница Сетевые элементы CSS
- Следующая страница Тест CSS
