Отзывчивый дизайн на HTML5 и CSS3 для любых устройств [Бен Фрэйн] (pdf) читать постранично

Бен Фрэйн

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

Третье издание

2022

ББК 004.738.5
УДК 004.738.5
Ф86

Фрэйн Бен
Ф86

Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд. — СПб.:
Питер, 2022. — 336 с.: ил. — (Серия «Библиотека программиста»).
ISBN 978-5-4461-1495-5
Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может,
вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима!
Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это
не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль
автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью
CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то
смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу
книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания
на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.

16+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)
ББК 004.738.5
УДК 004.738.5
Права на издание получены по соглашению с Packt Publishing. Все права защищены. Никакая часть данной
книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев
авторских прав.

ISBN 978-1839211560 англ.

© Packt Publishing 2020. First published in the English language
under the title ‘Responsive Web Design with HTML5 and CSS3 —
Third Edition — 9781839211560)’

ISBN 978-5-4461-1495-5

© Перевод на русский язык ООО Издательство «Питер», 2022
© Издание на русском языке, оформление
ООО Издательство «Питер», 2022
© Серия «Библиотека программиста», 2022

Краткое оглавление
Предисловие......................................................................................................16
Глава 1. Основы отзывчивого веб-дизайна................................................19
Глава 2. Создание HTML-разметки..............................................................38
Глава 3. Медиазапросы — поддержка различных окон просмотра.....65
Глава 4. Fluid Layout, Flexbox и отзывчивые изображения.......................85
Глава 5. CSS Grid........................................................................................... 121
Глава 6. CSS-селекторы, типографика, цветовые режимы
и многое другое........................................................................................ 149
Глава 7. Потрясающая эстетика с помощью CSS.................................. 187
Глава 8. SVG и независимость от разрешения....................................... 219
Глава 9. Переходы, преобразование и анимация................................. 253
Глава 10. Освоение форм с помощью HTML5 и CSS............................ 281
Глава 11. Бонусные техники и советы....................................................... 309

Оглавление
Краткое оглавление . ........................................................................................5
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
О научных редакторах. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Предисловие......................................................................................................16
Для кого эта книга . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Структура. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Что нужно для работы с книгой. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Загрузка файлов с примерами кода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Цветные изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Типографские соглашения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
От издательства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Глава 1. Основы отзывчивого веб-дизайна . .............................................19
Браузеры и устройства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Что такое отзывчивый дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Коротко об отзывчивом веб-дизайне . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Поддержка браузерами. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Текстовые редакторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Инструменты для разработки софта. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Первый пример отзывчивого дизайна. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Базовый файл HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Укрощение изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Ввод медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Несовершенство нашего примера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Глава 2. Создание HTML-разметки..............................................................38
Правильное начало работы с HTML‑страницами . . . . . . . . . . . . . . . . . . . . . . . . . 40
Элемент doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Тег html и атрибут lang . . . .