product iamge

Отзывчивый дизайн на HTML5 и CSS3 для любых устройств

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Download
Search on Amazon

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.

Author(s): Бен Фрэйн
Series: Библиотека программиста
Edition: 1
Publisher: Питер
Year: 2022

Language: Russian
Commentary: Vector PDF
Pages: 336
City: СПб.
Tags: Animation; HTML5; CSS; Scalable Vector Graphics; Web Design

Краткое оглавление
Об авторе
О научных редакторах
Предисловие
Для кого эта книга
Структура
Что нужно для работы с книгой
Загрузка файлов с примерами кода
Цветные изображений
Типографские соглашения
От издательства
1. Основы отзывчивого веб-дизайна
Браузеры и устройства
Что такое отзывчивый дизайн
Коротко об отзывчивом веб-дизайне
Поддержка браузерами
Текстовые редакторы
Инструменты для разработки софта
Первый пример отзывчивого дизайна
Базовый файл HTML
Укрощение изображений
Ввод медиазапросов
Несовершенство нашего примера
Итоги
2. Создание HTML-разметки
Правильное начало работы с HTML‑страницами
Элемент doctype
Тег html и атрибут lang
Кодировка символов
Добрый HTML5
Разумный подход к HTML-разметке
Да здравствует могущественный тег
Новые семантические элементы в HTML5
Элемент main
Элемент section
Элемент nav
Элемент article
Элемент aside
Элемент header
Элемент footer
Алгоритм схемы HTML5
Замечания относительно элементов h1–h6
Элемент

Элемент


Элемент


Элементы
и 

Элементы
и 
Элемент

Семантика HTML на уровне текста
Элемент
Элемент
Элемент
Элемент
Элемент
Устаревшие функции HTML
Практическое применение HTML‑элементов
Использование WCAG и WAI-ARIA для повышения доступности веб‑приложений
WCAG
WAI-ARIA
Медиавозможности, встроенные в HTML5
Добавление видео и аудио в разметку HTML
Отзывчивое HTML5-видео и iFrames
Итоги
Упражнение
3. Медиазапросы — поддержка различных окон просмотра
Метатег viewport
Зачем нужны медиазапросы
Основная условная логика в CSS
Синтаксис медиазапроса
Медиазапросы в тегах link
Медиазапросы с использованием правила @import
Медиазапросы в файле CSS
Инверсия логики медиазапросов
Объединение медиазапросов
Ряд различных медиазапросов
Повседневные медиазапросы
Что можно тестировать с помощью медиазапросов
Использование медиазапросов для изменения веб-дизайна
Расширенные рекомендации по медиазапросам
Организация медиазапросов
Практические аспекты разделения медиазапросов
Вложение медиазапросов через встраивание
Что делать — объединять медиазапросы или же записывать их там, где они пригодятся?
Спецификация Media Queries Level 4
Медиа-функции взаимодействия со страницей
Медиа-функция prefers-color-scheme
Итоги
4. Fluid Layout, Flexbox и отзывчивые изображения
Преобразование фиксированного пиксельного дизайна в пропорциональный резиновый макет
Зачем нужен Flexbox
Представляем Flexbox
Тернистый путь Flexbox
Кому-то все еще нужны префиксы
Возможность динамического изменения
Различные макеты Flexbox внутри разных медиазапросов
Свойство inline-flex
Свойства выравнивания, предоставляемые Flexbox
Простой зафиксированный подвал
Изменение порядка следования исходных элементов
Свертка flex-элементов
Итоги по Flexbox
Отзывчивые изображения
Проблема, присущая отзывчивым изображениям
Простое переключение разрешения с помощью srcset
Более совершенный вариант переключения с помощью srcset и sizes
Управление элементом picture
Итоги
5. CSS Grid
Что такое CSS Grid и какие проблемы она решает
Базовый синтаксис Grid
Терминология, специфичная для Grid
Настройка сетки
Явное и неявное позиционирование элементов
Размещение и изменение размера элементов сетки
Свойство gap
Функция repeat()
Единица fr
Размещение элементов в сетке
Ключевое слово span
Ключевое слово dense
Именованные линии сетки
Свойство grid-template-areas
Применение ваших знаний на практике
Ключевые слова auto-fit и auto-fill
Функция minmax()
Сокращения в синтаксисе
Сокращение grid-template
Сокращение grid
Итоги
6. CSS-селекторы, типографика, цветовые режимы и многое другое
Селекторы, единицы измерения и возможности
Анатомия правила CSS
Псевдоэлементы и псевдоклассы
Селекторы CSS Level 3 и как их использовать
Структурные псевдоклассы
Отзывчивые меры длины, выражаемые в процентных отношениях применительно к окнам просмотра (vmax, vmin, vh, vw)
Функция calc()
Пользовательские свойства CSS
Использование @supports для создания альтернативных вариантов
Веб-типографика
Системные шрифты
CSS-правило @font-face
Реализация веб-шрифтов с помощью @font-face
Оптимизация загрузки шрифтов с помощью @font-face
Вариативные шрифты
Форматы цвета в CSS и альфа‑прозрачность
Цвет в формате RGB
Цвет в формате HSL
Итоги
7. Потрясающая эстетика с помощью CSS
Создание теней для текста средствами CSS
Если размытие не нужно, его значение можно опустить
Создание теней для блоков
Тень внутри элемента
Создание нескольких теней
Понятие протяженности
Градиентные фоны
Запись линейного градиента
Радиальные градиентные фоны
Удобные ключевые слова «распространения» для задания размеров отзывчивых конструкций
Повторяющиеся градиенты
Паттерны градиентных фонов
Использование нескольких фоновых изображений
Размер фона
Позиционирование фона
Краткая запись настроек фона
Фоновые изображения с высоким разрешением
CSS-фильтры
Доступные CSS-фильтры
Объединение CSS-фильтров
Предупреждения, касающиеся CSS‑производительности
CSS-свойство clip-path
Свойство clip-path с URL-адресом
Базовые формы CSS
Анимация с помощью свойства clip-path
Изображение в качестве маски
Пример изображения-маски
Свойство mix-blend-mode
Итоги
8. SVG и независимость от разрешения
Краткая история SVG
Изображение — считываемый веб‑документ
Корневой элемент SVG
Пространство имен
Теги title и desc
Тег defs
Элемент g
Фигуры SVG
SVG-пути
Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений
Сервисы SVG-значков экономят время
Вставка SVG-графики в веб-страницы
Использование тега img
Использование тега object
Вставка SVG-графики в качестве фонового изображения
Краткое отступление о URI-идентификаторах данных
Создание спрайтов изображений
Непосредственная вставка SVG
Повторное использование графических объектов из символов
Встраиваемая в код SVG-графика позволяет задавать разные цвета в разных контекстах
Изменение цветов SVG-изображений с помощью пользовательских свойств CSS
Повторное использование графических объектов из внешних источников
На что влияет способ вставки SVG‑данных?
Особенности браузеров
Дополнительные возможности и особенности технологии SVG
SMIL-анимация
Задание стилей SVG с помощью внешней таблицы стилей
Задание стилей SVG с помощью внутренних стилей
Анимация SVG-графики с помощью CSS
Анимация SVG-графики с помощью JavaScript
Простой пример анимации SVG-графики с помощью GreenSock
Оптимизация SVG
Использование SVG в качестве фильтров
Медиазапросы внутри SVG
Советы по внедрению
Итоги
Дополнительные ресурсы
9. Переходы, преобразование и анимация
Что такое CSS-переходы, и как ими можно воспользоваться
Свойства перехода
Краткая форма записи перехода с помощью свойства transition
Переходы различных свойств за разные периоды времени
Функции развития процесса перехода по времени
2D-преобразования в CSS
Масштабирование (scale)
Перемещение (translate)
Поворот (rotate)
Наклон (skew)
Матрица (matrix)
Свойство transform-origin
3D-преобразования в CSS
Свойство transform3d
Использование преобразований при постепенном улучшении на примере функции translate3d
Эффекты анимации с помощью CSS
Свойство animation-fill-mode
Упражнения и практика
Итоги
10. Освоение форм с помощью HTML5 и CSS
Формы HTML5
Основные сведения о компонентах формы HTML5
Атрибут placeholder
Стилизация указателя ввода с помощью свойства caret-color
Атрибут required
Атрибут autofocus
Атрибут autocomplete
Атрибут list и элемент datalist
Типы вводимой информации, определяемые HTML5
Тип email
Тип number
Тип url
Тип tel
Тип search
Атрибут pattern
Тип color
Типы date и time
Тип range
Стилизация форм HTML5 с помощью CSS
Обозначение полей, требующих обязательного заполнения
Создание эффекта заливки фона
Итоги
11. Бонусные техники и советы
Разбивка длинных URL-адресов
Обрезка текста
Создание панелей с горизонтальной прокруткой
Создание панелей с горизонтальной прокруткой с помощью Grid
Модуль CSS Scroll Snap
Свойство scroll-snap-type
Свойство scroll-snap-align
Свойство scroll-padding
Плавная прокрутка с помощью свойства scroll‑behavior
Привязка брейкпоинтов CSS к JavaScript
Обкатка веб-дизайна в браузере на самых ранних стадиях
Тестирование на реальных устройствах
Использование принципа постепенного улучшения
Определение матрицы браузерной поддержки
Функциональное, но не эстетическое единообразие
Выбор поддерживаемых браузеров
Создание нескольких уровней пользовательского восприятия
Отказ от использования сред разработки CSS при создании конечного продукта
Скрытие, показ и загрузка содержимого для разных окон просмотра
Средства контроля качества кода
Повышение производительности
Инструменты для оценки производительности
В преддверии великих перемен
Итоги