Бен Фрэйн - Отзывчивый дизайн на HTML5 и CSS3 для любых устройств
3-е изданиеНазвание: | Отзывчивый дизайн на HTML5 и CSS3 для любых устройств | |
Автор: | Бен Фрэйн | |
Жанр: | Web-дизайн | |
Изадано в серии: | Библиотека программиста | |
Издательство: | Питер | |
Год издания: | 2022 | |
ISBN: | 978-5-4461-1495-5 | |
Отзывы: | Комментировать | |
Рейтинг: | ||
Поделись книгой с друзьями! Помощь сайту: донат на оплату сервера |
Краткое содержание книги "Отзывчивый дизайн на HTML5 и CSS3 для любых устройств"
Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.
Читаем онлайн "Отзывчивый дизайн на HTML5 и CSS3 для любых устройств". [Страница - 4]
Использование @supports для создания альтернативных вариантов . . . 171
Веб-типографика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Системные шрифты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
CSS-правило @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Реализация веб-шрифтов с помощью @font-face . . . . . . . . . . . . . . . . . 175
Оптимизация загрузки шрифтов с помощью @font-face . . . . . . . . . . . 176
Вариативные шрифты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Форматы цвета в CSS и альфа‑прозрачность . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Цвет в формате RGB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Цвет в формате HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Глава 7. Потрясающая эстетика с помощью CSS ................................. 187
Создание теней для текста средствами CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Если размытие не нужно, его значение можно опустить . . . . . . . . . . . 189
Создание теней для блоков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Тень внутри элемента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Создание нескольких теней . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Понятие протяженности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Градиентные фоны. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Запись линейного градиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Радиальные градиентные фоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Удобные ключевые слова «распространения» для задания
размеров отзывчивых конструкций . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Повторяющиеся градиенты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Паттерны градиентных фонов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Использование нескольких фоновых изображений . . . . . . . . . . . . . . . . . . . . . 199
Размер фона. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Позиционирование фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Краткая запись настроек фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Фоновые изображения с высоким разрешением . . . . . . . . . . . . . . . . . 202
CSS-фильтры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Доступные CSS-фильтры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Объединение CSS-фильтров. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Оглавление
11
Предупреждения, касающиеся CSS‑производительности. . . . . . . . . . . . . . . . 209
CSS-свойство clip-path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Свойство clip-path с URL-адресом. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Базовые формы CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Анимация с помощью свойства clip-path . . . . . . . . . . . . . . . . . . . . . . . . . 214
Изображение в качестве маски . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Пример изображения-маски . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Свойство mix-blend-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Глава 8. SVG и независимость от разрешения ..................................... 219
Краткая история SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Изображение — считываемый веб‑документ . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Корневой элемент SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Пространство имен. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Теги title и desc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Тег defs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Элемент g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Фигуры SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
SVG-пути . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Создание SVG-графики с помощью популярных пакетов и сервисов
редактирования изображений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Сервисы SVG-значков экономят время . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Вставка SVG-графики в веб-страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Использование тега img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Использование тега object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Вставка SVG-графики в качестве фонового изображения . . . . . . . . . 229
Краткое отступление о URI-идентификаторах данных . . . . . . . . . . . . . 229
Создание спрайтов изображений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . --">
Книги схожие с «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств» по жанру, серии, автору или названию:
Аарон Уолтер - Эмоциональный веб-дизайн Жанр: Маркетинг, PR, реклама Год издания: 2012 Серия: Актуальные книги для тех, кто создает сайты |
Влад В. Головач - Дизайн пользовательского интерфейса 2. Искусство мыть слона Жанр: Самиздат, сетевая литература Год издания: 2009 |
Брайан Хоган - HTML5 и CSS3. Веб-разработка по стандартам нового поколения Жанр: Интернет Год издания: 2014 Серия: Библиотека программиста |
Другие книги из серии «Библиотека программиста»:
Дэниел Г Грэм - Этичный хакинг практическое руководство по взлому Жанр: Хакерство Год издания: 2022 Серия: Библиотека программиста |
Коллектив авторов - Язык СИ для профессионалов Жанр: Советские издания Год издания: 1991 Серия: Библиотека программиста |
Энтони Шоу - Внутри CPYTHON: гид по интерпретатору Python Жанр: Python Год издания: 2023 Серия: Библиотека программиста |
Грант Бейлевельд, Джон Крон, Аглаэ Бассенс - Глубокое обучение в картинках. Визуальный гид по искусственному интеллекту Жанр: Искусственный интеллект Год издания: 2020 Серия: Библиотека программиста |