Библиотека knigago >> Компьютеры и Интернет >> Web-дизайн >> Отзывчивый дизайн на HTML5 и CSS3 для любых устройств


СЛУЧАЙНЫЙ КОММЕНТАРИЙ

# 1062, книга: В Речи Посполитой
автор: Илья Исаевич Левит

Книга "В Речи Посполитой" Ильи Левита - это захватывающее исследование истории и культуры многоконфессионального и многоэтнического государства, существовавшего на территории современной Польши, Литвы, Беларуси и Украины с конца XVI века до конца XVIII века. Левит мастерски сплетает повествование из архивных документов, исторических трудов и личных свидетельств, создавая яркую картину жизни в Речи Посполитой. Он исследует политическую систему с выборным монархом и сложным сеймом,...

СЛУЧАЙНАЯ КНИГА

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

3-е издание Отзывчивый дизайн на HTML5 и CSS3 для любых устройств
Книга - Отзывчивый дизайн на HTML5 и CSS3 для любых устройств.  Бен Фрэйн  - прочитать полностью в библиотеке КнигаГо
Название:
Отзывчивый дизайн на HTML5 и CSS3 для любых устройств
Бен Фрэйн

Жанр:

Web-дизайн

Изадано в серии:

Библиотека программиста

Издательство:

Питер

Год издания:

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]

230
Непосредственная вставка 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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . --">

Оставить комментарий:


Ваш e-mail является приватным и не будет опубликован в комментарии.

Книги схожие с «Отзывчивый дизайн на HTML5 и CSS3 для любых устройств» по жанру, серии, автору или названию:

Другие книги из серии «Библиотека программиста»:

Классические задачи Computer Science на языке Python. Дэвид Копец
- Классические задачи Computer Science на языке Python

Жанр: Python

Год издания: 2020

Серия: Библиотека программиста

Большая книга проектов Python. Эл Свейгарт
- Большая книга проектов Python

Жанр: Python

Год издания: 2022

Серия: Библиотека программиста