CSS для профи

Как вы понимаете, что зашли на хороший сайт? Это происходит практически мгновенно, с первого взгляда. Такие сайты привлекают внимание картинкой — отлично выглядят, а кроме этого они интерак тивны и отзывчивы. Сразу видно, что такую страничку создавал CSS-профи, ведь именно каскадные таблицы стилей (CSS) отвечают за все наполнение и оформление сайта — от расположения элементов до неуловимых ш грихов. Дело за малым — стать CSS-профи, а для этого придется разобраться в прин ципах CSS, научиться воплощать в жизнь идеи дизайнеров, не забывать о таких важных «мелочах», как красиво подобранный шрифт, плавные переходы и сбалансированная графика. Перед вами прямой путь в высшую лигу веб-разработки. Книга «CSS для профи» подарит вам не только свежие идеи, но и вдохновит на подвиги, а облегчить этот тернистый путь помогут новейшие технические достижения — адаптивный дизайн, библиотеки шаблонов и многое другое Оглавление Предисловие Введение Благодарности Об этой книге Для кого предназначена книга Структура издания Условные обозначения и файлы примеров Версии браузеров Об авторе Иллюстрация на обложке Часть I. Обзор основных принципов Глава 1. Каскадность, специфичность и наследование 1.1. Каскадность 1.1.1. Источник стилей 1.1.2. Специфичность селекторов 1.1.3. Исходный порядок 1.1.4. Два правила 1.2. Наследование 1.3. Специальные значения 1.3.1. Ключевое слово inherit 1.3.2. Ключевое слово initial 1.4. Сокращенная запись свойств 1.4.1. Остерегайтесь сокращений, скрыто переопределяющих другие стили 1.4.2. Порядок записи сокращенных значений Итоги главы Глава 2. Работа с относительными единицами 2.1. Мощь относительных значений 2.1.1. Борьба за pixel-perfect-дизайн 2.1.2. Конец эпохи pixel-perfect 2.2. Единицы ет и гет 2.2.1. Единицы ет для указания размера шрифта 2.2.2. Указание размера шрифта в единицах rem 2.3. Перестаньте думать в пикселах 2.3.1. Установка адекватного размера шрифта по умолчанию 2.3.2. Делаем панель адаптивной 2.3.3. Изменение размера отдельного компонента 2.4. Единицы измерения, относящиеся к размеру экрана устройства 2.4.1. Единицы vw для указания размера шрифта 2.4.2. Функция calc() для указания размера шрифта 2.5. Числа без единиц измерения и свойство line-height 2.6. Пользовательские свойства (или CSS-переменные) 2.6.1. Динамическое изменение пользовательских свойств 2.6.2. Изменение пользовательских свойств с помощью JavaScript 2.6.3. Экспериментирование с пользовательскими свойствами Итоги главы Глава 3. Знакомство с блочной моделью 3.1. Трудности с шириной элемента 3.1.1. Избегаем волшебных чисел 3.1.2. Настройка блочной модели 3.1.3. Глобальное применение свойства box-sizing: border-box 3.1.4. Добавление зазора между колонками 3.2. Проблемы высоты элементов 3.2.1. Управление переполнением 3.2.2. Применение альтернатив к высотам, указанным в процентах 3.2.3. Свойства min-height и max-height 3.2.4. Центрирование контента по вертикали 3.3. Отрицательные значения полей 3.4. Схлопывание полей 3.4.1. Схлопывание между текстом 3.4.2. Схлопывание многочисленных полей 3.4.3. Схлопывание вне контейнера 3.5. Расстояние между элементами в контейнере 3.5.1. Учет изменения контента 3.5.2. Универсальное решение: селектор лоботомированной совы Итоги главы Часть II. Разметка Глава 4. Плавающие элементы 4.1. Предназначение плавающих элементов 4.2. Схлопывание контейнера и clearfix 4.2.1. Что такое схлопывание контейнера 4.2.2. Что такое clearfix 4.3. Неожиданный «захват» плавающего элемента 4.4. Медиаобъекты и блочный контекст форматирования 4.4.1. Что такое блочный контекст форматирования 4.4.2. Использование блочного контекста форматирования для разметки медиаобъектов 4.5. CSS-сетки 4.5.1. Принципы CSS-сетки 4.5.2. Создание CSS-сетки 4.5.3. Добавление зазоров Итоги главы Глава 5. Flexbox-версгка 5.1. Принципы flexbox-верстки 5.1.1. Создание базовой flex-навигации 5.1.2. Добавление отступов и промежутков 5.2. Размеры Аех-элементов 5.2.1. Свойство flex-basis 5.2.2. Свойство flex-grow 5.2.3. Свойство flex-shrink 5.2.4. Практические примеры 5.3. Направление flex-элементов 5.3.1. Изменение направления flex-элементов 5.3.2. Стилевое форматирование формы авторизации 5.4. Выравнивание, промежутки и другие штрихи 5.4.1. Свойства flex-контейнеров 5.4.2. Свойства flex-элементов 5.4.3. Выравнивание flex-блоков 5.5. Пара вещей, о которых следует знать 5.5.1. Flex-баги 5.5.2. Полноформатная разметка Итоги главы Глава 6. CSS-сетки 6.1. Веб-разметка уже здесь 6.1.1. Создание базовой сетки 6.2. Анатомия сетки 6.2.1. Нумерация линий сетки 6.2.2. Совместная работа с flex-блоками 6.3. Альтернативный синтаксис 6.3.1. Присвоение имен линиям сетки 6.3.2. Присвоение имен областям сетки 6.4. Явная и неявная сетка 6.4.1. Внесем разнообразие 6.4.2. Подгонка элементов для заполнения полосы сетки 6.5. Запросы функций 6.6. Выравнивание Итоги главы Глава 7. Контексты позиционирования и наложения 7.1. Фиксированное позиционирование 7.1.1. Создание модального окна с фиксированным позиционированием 7.1.2. Управление размером позиционированных элементов 7.2. Абсолютное позиционирование 7.2.1. Абсолютное позиционирование кнопки Закрыть 7.2.2. Позиционирование псевдоэлементов 7.3. Относительное позиционирование 7.3.1. Создание раскрывающегося меню 7.3.2. Создание треугольника CSS 7.4. Контексты наложения и z-индекса 7.4.1. Процесс рендеринга и порядок наложения 7.4.2. Управление наложением с помощью свойства z-index 7.4.3. Контексты наложения 7.5. Липкое позиционирование Итоги главы Глава 8. Адаптивный дизайн 8.1. Подход Mobile First 8.1.1. Создание мобильного меню 8.1.2. Добавление метатега viewport 8.2. Медиазапросы 8.2.1. Типы медиазапросов 8.2.2. Добавление контрольных точек на страницу 8.2.3. Добавление адаптивных колонок 8.3. Резиновые макеты 8.3.1. Добавление стилей для большой области просмотра 8.3.2. Работа с таблицами 8.4. Адаптивные изображения 8.4.1. Использование нескольких изображений для экранов разных размеров 8.4.2. Использование атрибута srcset для передачи нужного изображения Итоги главы Часть III. Масштабируемый CSS-код Глава 9. Модульный CSS 9.1. Базовые стили: закладываем основы 9.2. Простой модуль 9.2.1. Вариации модуля 9.2.2. Модули с множеством элементов 9.3. Составление крупных структур из модулей 9.3.1. Разделение ответственности между модулями 9.3.2. Именование модулей 9.4. Вспомогательные классы 9.5. Методологии CSS Итоги главы Глава 10. Библиотеки компонентов 10.1. Введение в KSS 10.1.1. Установка KSS 10.1.2. Написание KSS-документации 10.1.3. Документирование вариаций модуля 10.1.4. Создание начальной страницы 10.1.5. Документирование модулей, которым требуется JavaScript 10.1.6. Упорядочение контента библиотеки компонентов по разделам 10.2 Инновационный способ верстки CSS 10.2.1. Метод CSS First 10.2.2. Библиотека компонентов в качестве API Итоги главы Часть IV. Темы повышенной сложности Глава 11. Фоны, тени и режимы смешивания 11.1. Градиенты 11.1.1. Использование нескольких цветовых узлов 11.1.2. Использование радиального градиента 11.2. Тени 11.2.1. Создание объема с помощью градиентов и теней 11.2.2. Элементы с плоским дизайном 11.2.3. Создание кнопок с более современным дизайном 11.3. Режимы смешивания 11.3.1. Изменение оттенка изображения 11.3.2. Виды режимов смешивания 11.3.3. Добавление текстуры изображению 11.3.4. Микширование режимов смешивания Итоги главы Глава 12. Контраст, цвета и интервалы 12.1. Царство контраста 12.1.1. Создание шаблона 12.1.2. Реализация дизайна 12.2. Цвета 12.2.1. Разбираемся с нотациями цветов 12.2.2. Добавление цветов в палитру 12.2.3. Применение контраста при выборе цвета текста 12.3. Интервалы 12.3.1. Единицы ет или пикселы? 12.3.2. Вычисление высоты строки 12.3.3. Интервалы между строчными элементами Итоги главы Глава 13. Шрифтовое оформление 13.1. Веб-шрифты 13.2. Сервис Google Fonts 13.3. Как работает свойство @font-face 13.3.1. Форматы шрифтов и замена при необходимости 13.3.2. Варианты начертания в одной гарнитуре 13.4. Управление интервалами в целях повышения читаемости 13.4.1. Интервалы основного текста сайта 13.4.2. Заголовки, мелкие элементы и интервалы 13.5. Вспышки нестилизованного и невидимого текста 13.5.1. Библиотека Font Face Observer 13.5.2. Откат к системным шрифтам 13.5.3. И наконец, свойство font-display Итоги главы Глава 14. Переходы 14.1. Отсюда сюда 14.2. Функции времени 14.2.1. Изучение кривых Безье 14.2.2. Шаги 14.3. Неанимируемые свойства 14.3.1. Свойства, которые нельзя анимировать 14.3.2. Появление и исчезновение 14.4. Переход к автоматическому выравниванию высоты Итоги главы Глава 15. Трансформации 15.1. Вращение, масштабирование, смещение и наклон 15.1.1. Изменение точки трансформации 15.1.2. Применение нескольких трансформаций 15.2. Анимированные трансформации 15.2.1. Масштабирование значков 15.2.2. Создание «вылетающих» меток 15.2.3. Поэтапные переходы 15.3. Производительность анимации 15.3.1. Рендеринг страницы 15.4. Трехмерные (3D) трансформации 15.4.1. Контроль перспективы 15.4.2. Профессиональные приемы ЗЭ-трансформации Итоги главы Глава 16- Анимация 16.1. Ключевые кадры 16.2. Анимация ЗО-трансформаций 16.2.1. Создание макета без анимации 16.2.2. Добавление анимации в макет 16.3. Задержка запуска анимации и режим заполнения 16.4. Передача смысла с помощью анимации 16.4.1. Реакция на действие пользователя 16.4.2. Привлечение внимания пользователя 16.5. Совет напоследок Итоги главы Приложения Приложение А. Селекторы А.1. Базовые селекторы А.2. Комбинаторы А.З. Селекторы псевдоклассов А.4. Селекторы псевдоэлементов А.5. Селекторы атрибутов Приложение Б. Препроцессоры Б.1. Препроцессор Sass Б.1.1. Установка препроцессора Sass Б.1.2. Запуск препроцессора Sass Б.1.3. Важные функции препроцессора Sass Б.2. PostCSS Б.2.1. Использование инструмента Autoprefixer Б.2.2. Применение cssnext Б.2.3. Использование cssnano Б.2.4. Использование PreCSS SummaryCSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design.Foreword by Chris Coyier, Cofounder of CodePen.Dig even deeper into the secrets of CSS with our video course CSS in Depth in Motion, available exclusively at Manning.com (www.manning.com/livevideo/css-in-depth-​in-motion)!Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.About the TechnologySome websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them!About the BookCSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom line: this book will make you a better web designer and your apps will look fantastic!What's InsideAvoid common CSS pitfallsMaster misunderstood conceptsUse flexbox and grid layoutResponsive designs for any deviceCode for reuse and maintainabilityAbout the ReaderWritten for web developers who know the basics of CSS and HTML.About the AuthorKeith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site.Table of ContentsPART 1 - REVIEWING THE FUNDAMENTALSCascade, specificity, and inheritance Working with relative units Mastering the box model PART 2 - MASTERING LAYOUTMaking sense of floats Flexbox Grid layout Positioning and stacking contexts Responsive design PART 3 - CSS AT SCALE Modular CSS Pattern libraries PART 4 - ADVANCED TOPICSBackgrounds, shadows, and blend modes Contrast, color, and spacing Typography Transitions Transforms Animations Summary CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. Foreword by Chris Coyier, Cofounder of CodePen. Dig even deeper into the secrets of CSS with our video course CSS in Depth in Motion , available exclusively at Manning.com ((http://www.manning.com/livevideo/css-in-depth-in-motion) www.manning.com/livevideo/css-in-dept... )! Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the Technology Some websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them! About the Book CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom this book will make you a better web designer and your apps will look fantastic! What's Inside About the Reader Written for web developers who know the basics of CSS and HTML. About the Author Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site. Table of Contents CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. About the Technology Some websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them! About the Book CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom line: this book will make you a better web designer and your apps will look fantastic! What's inside Avoid common CSS pitfalls Master misunderstood concepts Use flexbox and grid layout Responsive designs for any device Code for reuse and maintainability About the Reader Written for web developers who know the basics of CSS and HTML. About the Author Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site

CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design.

CSS in Depth in Motion is the perfect next step after finishing this book, digging deeper into CSS with new exercises and examples to really help you reach the next level of web design.