Бен Фрэйн - Отзывчивый дизайн на 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 для любых устройств". [Страница - 5]
Непосредственная вставка SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Повторное использование графических объектов из символов . . . . . . . . . . 231
Встраиваемая в код SVG-графика позволяет задавать разные
цвета в разных контекстах. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Изменение цветов SVG-изображений с помощью
пользовательских свойств CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Повторное использование графических объектов из внешних
источников. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
На что влияет способ вставки SVG‑данных?. . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Особенности браузеров. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
12
Оглавление
Дополнительные возможности и особенности технологии SVG. . . . . . . . . . . 239
SMIL-анимация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Задание стилей SVG с помощью внешней таблицы стилей. . . . . . . . . 241
Задание стилей SVG с помощью внутренних стилей . . . . . . . . . . . . . . 242
Анимация SVG-графики с помощью CSS. . . . . . . . . . . . . . . . . . . . . . . . . 242
Анимация SVG-графики с помощью JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . 244
Простой пример анимации SVG-графики с помощью
GreenSock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Оптимизация SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Использование SVG в качестве фильтров. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Медиазапросы внутри SVG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Советы по внедрению. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Дополнительные ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Глава 9. Переходы, преобразование и анимация . .............................. 253
Что такое CSS-переходы и как ими можно воспользоваться. . . . . . . . . . . . . . 254
Свойства перехода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Краткая форма записи перехода с помощью свойства
transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Переходы различных свойств за разные периоды. . . . . . . . . . . . . . . . . 257
Функции развития процесса перехода по времени . . . . . . . . . . . . . . . . . . . . . 258
2D-преобразования в CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Масштабирование (scale) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Перемещение (translate) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Поворот (rotate) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Наклон (skew) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Матрица (matrix) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Свойство transform-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
3D-преобразования в CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Свойство transform3d. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Использование преобразований при постепенном улучшении
на примере функции translate3d . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Эффекты анимации с помощью CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Свойство animation-fill-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Упражнения и практика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Итоги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Оглавление
13
Глава 10. Освоение форм с помощью HTML5 и CSS .......................... 281
Формы HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Основные сведения о компонентах формы HTML5. . . . . . . . . . . . . . . . 283
Атрибут placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Стилизация указателя ввода с помощью свойства caret-color. . . . . . 284
Атрибут required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Атрибут autofocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Атрибут autocomplete. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Атрибут list и элемент datalist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Типы вводимой информации, определяемые HTML5. . . . . . . . . . . . . . . . . . . . . 289
Тип email . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Тип number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Тип url . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Тип tel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Тип search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Атрибут pattern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Тип color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . --">
Книги схожие с «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств» по жанру, серии, автору или названию:
Влад В. Головач - Дизайн пользовательского интерфейса Жанр: Самиздат, сетевая литература Год издания: 2003 |
Дженифер Нидерст Роббинс - Веб-дизайн для начинающих Жанр: Web-дизайн Год издания: 2021 |
Робин Никсон - Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 Жанр: Интернет Год издания: 2016 Серия: Бестселлеры o’reilly |
Робин Никсон - Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 Жанр: PHP Год издания: 2023 Серия: Бестселлеры o’reilly |
Другие книги из серии «Библиотека программиста»:
Джеффри Фридл - Регулярные выражения. 2-е изд. Жанр: Другие языки и системы программирования Год издания: 2003 Серия: Библиотека программиста |
Дэвид Копец - Классические задачи Computer Science на языке Python Жанр: Python Год издания: 2020 Серия: Библиотека программиста |
Эл Свейгарт - Большая книга проектов Python Жанр: Python Год издания: 2022 Серия: Библиотека программиста |
Джошуа Глейзер, Санджай Мадхав - Многопользовательские игры. Разработка сетевых приложений Жанр: Программирование игр Год издания: 2017 Серия: Библиотека программиста |