CSS3 для веб-дизайнеров - [2]
Но, разумеется, если вам нравится читать спецификации – вперед! Естественно, из них можно многому научиться – но намного прагматичнее сконцентрироваться на том, что уже внедрено и может быть использовано сегодня, и об этих вещах мы поговорим в этой главе. Затем мы будем применять эти вещи на конкретных примерах.
Мне всегда удавалось научиться большему о веб-дизайне, изучая рабочие примеры, нежели читая нормативные документы, и именно такого подхода мы будем придерживаться на страницах этой книги.
CSS3 – для всех
От многих веб-дизайнеров со всего мира я слышу одну и ту же фразу: «Не могу дождаться, хочу начать использовать CSS3… когда его закончат».
Правда состоит в том, что можно начинать использовать CSS3 прямо сейчас. К счастью, не нужно перестраивать свое мышление или радикально менять те способы, на основе которых сейчас разрабатываются сайты. Каким образом можно использовать CSS3 на любом проекте? Мы изучим те ситуации, где пользоваться CSS3 приемлемо, концентрируясь непосредственно на взаимодействии.
Целиться на взаимодействие
Если в течение последних нескольких лет мы все делали правильно, то работали на основе веб-стандартов (семантическая HTML-разметка и CSS для форматирования, шрифтов, цветов и так далее), оставляя большинство интерактивных эффектов – анимацию, обратную связь, движение – технологиям Flash и JavaScript. Свойства CSS3, которые медленно, но верно появляются в браузерах, нацеленных на будущее, позволяют нам переносить часть такого взаимодействия в таблицы стилей.
Как дизайнер интерфейсов, которому намного ближе визуальная сторона веб-дизайна, а не программирование, чем больше я могу сделать для создания наглядного интерфейса, пользуясь привычными инструментами – HTML и CSS, – тем больше я радуюсь.
CSS3 придумали для веб-дизайнеров – таких, как вы и я, – и мы можем начать пользоваться его частями сегодня – до тех пор, пока мы знаем, когда и как его применять.
Когда применять CSS3
В терминах визуального взаимодействия с сайтом можно разбить все на две категории: ключевое и второстепенное (табл. 1.01).
>Таблица 1.01. Визуальное взаимодействие с сайтом можно разбить на категории ключевое и второстепенное. К второстепенному CSS3 можно применять сегодня
Такие составляющие, как брендирование, юзабилити, и расположение блоков крайне важны для успеха любого сайта, поэтому для этих элементов пользоваться технологией, которая не полностью поддерживается всеми браузерами, – рискованное предприятие.
Например, в развивающейся спецификации CSS3 появилось несколько элементов для управления форматом – это то, что нам всем крайне нужно.
Уже многие годы мы заставляем свойство >float
справляться с раскладкой блоков. Мы разобрались, как справляться с задачами с помощью тех средств, которые у нас есть, но настоящий механизм создания раскладки совершенно необходим.
Учитывая все вышесказанное, два из трех модулей CSS3, касающихся раскладки, еще не внедрены ни в один браузер. Эти модули по-прежнему находятся в разработке, и они по-прежнему весьма запутанны, сложны для понимания и, скорее всего, отличаются от окончательного решения, которое мы ищем. Что важнее, для такой важной вещи, как форматирование, CSS3 – просто не тот инструмент.
С другой стороны спектра расположены второстепенные события – взаимодействие (эффекты наведения и фокусировки, оформление форм, гибкая адаптация под любой размер окна) и визуальные эффекты, которые сопровождают такое взаимодействие (включая анимации). Менее важно сохранить одинаковое поведение такого рода в разных браузерах, что дает отличную возможность применять определенные фрагменты CSS3 для тех браузеров, которые поддерживают их сейчас.
На протяжении всей книги мы будем применять CSS3 для этих некритических событий, сохраняя более важные характеристики страницы нетронутыми для всех браузеров, вне зависимости от того, поддерживают ли они CSS3.
Когда мы решаем сконцентрироваться на таких некритических частях визуального взаимодействия, становится намного проще использовать CSS3 поверх CSS2.1 и обогащать взаимодействие с сайтом, не беспокоясь о том, что основной смысл, формат и доступность будут искажены.
Главные свойства CSS3, применимые сейчас
Теперь, когда мы точно определили область взаимодействия, в которой можно смело использовать CSS3, нам стоит также определиться, какие свойства CSS3 мы можем использовать. Иными словами, какие фрагменты спецификации достигли того уровня поддержки браузерами, чтобы быть применимыми уже сейчас.
Крупные блоки CSS3 до сих пор не внедрялись ни в один браузер. Какие-то вещи по-прежнему находятся в разработке. Можно любопытствовать о тех блоках, которые находятся в движении, но куда разумнее обратить внимание на то, что на самом деле работает – и, к счастью, такого уже предостаточно.
Давайте рассмотрим сравнительно небольшой набор главных свойств CSS3, которые будут использованы в примерах в этой книги (см. ниже и табл. 1.02). Сейчас приводятся только определения этих свойств; подробное описание синтаксиса и практика применения будут даны позже.
![«Запрещённый» Телеграм: путеводитель по самому скандальному интернет-мессенджеру](/storage/book-covers/71/718f9f8845a0997117ef115ee1c68de966a622c6.jpg)
Как стать лидером мнений среди премиальной аудитории Телеграма? Сколько зарабатывают авторы политических каналов? Какие политтехнологии реализуются на платформе мессенджера и как отличить правду от заказа? Об этом и многом другом рассказывает первый в России гид по Телеграму для специалистов по работе с общественным мнением – политиков, пиарщиков и журналистов.
![Инстаграм: хочу likes и followers](/storage/book-covers/29/290db653ce5b7a8db3bd22e1dd43e5ebe3eefc9e.jpg)
Instagram на сегодняшний момент самая динамично развивающаяся социальная сеть, имеющая самый дешевый трафик. Множество людей проводят, в среднем, от 2 до 5 часов в день за просмотром Instagram. Поэтому здесь очень легко добиваться результатов. Не важно, хотите вы быть популярным блогером, вывести бизнес в Instagram, или освоить новую востребованную профессию SMM-специалиста – эта книга будет одинаково полезна всем. Эта издание – не набор теоретических данных. Это практика. По этим технологиям прошли обучение 250 государственных организаций; около 3000 специалистов стали экспертами в области SMM.
![Интернет-магазин без правил](/storage/book-covers/ee/eef80ce18b3ef23f98e8eb6d820a913cb0420077.jpg)
В этой книге авторы специально для вас, уважаемые читатели, изложили собственный опыт и опыт нескольких сотен своих учеников, с которыми они уже создали больше 500 интернет-магазинов в России.Описание технологии разбито на простые и понятные этапы, которые проходит абсолютно любой успешный магазин. Вы познакомитесь с основными принципами, позволяющими построить свой бизнес наиболее быстро и с вложениями, которые может позволить себе даже студент.Количество открывающихся интернет-магазинов постоянно растет, в то время как на рынке отсутствует комплексное, разработанное практиками бизнеса и профессионалами пособие, доступное широкой аудитории.Данная книга — это своеобразный бумажный вирус, который овладевает умами.
![Яндекс для всех](/storage/book-covers/c7/c7446ed0e90016d91b89ce0c1651db51b794c679.jpg)
Рассказывается о ведущем поисковом ресурсе российской части Интернета — Яндексе. Описаны его сервисы для поиска документов и новостей, блогов и адресов, товаров и музыкальных произведений. Рассмотрены почтовый сервис и сервис для создания и размещения сайтов на Народ. ру. Читатель узнает о том, что такое "электронные деньги" и как с их помощью оплатить товар. Большое внимание уделяется общедоступным поисковым программам, которые Яндекс предлагает своим посетителям для поиска информации не только на сайтах, но и на своем компьютере.
![Дизайн-мышление: от разработки новых продуктов до проектирования бизнес-моделей](/storage/book-covers/34/347c5048e1e95165b6e99837a08747d6b6ddbefd.jpg)
Методы и технологии, которые использует профессиональный дизайнер для создания предметов, могут быть очень успешно использованы для решения бизнес-задач, стоящих перед руководителями компаний. И это не только разработка нового продукта. Дизайн-мышление эффективно помогает переосмыслить суть бизнеса, лучше понять потребности клиентов, найти уникальную и прибыльную нишу для стартапа и даже реализовать благотворительный проект.Тим Браун, глава одной из самых успешных дизайн-компаний мира, делится своей концепцией дизайн-мышления и на многочисленных примерах доказывает ее эффективность.Все права защищены.Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.Правовую поддержку издательства обеспечивает юридическая фирма «Вегас-Лекс»VEGAS LEX.
![Рунетология. Кто управляет русским Интернетом?](/storage/book-covers/76/76653a55488ea44828aeba6adef385066d51d6bd.jpg)
Самые сильные российские интернет-бренды. Самые известные люди Рунета. Самые первые его «поселенцы». Им посвящена программа Максима Спиридонова «Рунетология», выходящая еженедельно в рамках аудиожурнала PodFM.ru. Накопленный материал представляет большой интерес для тех, кто развивает свой бизнес в интернете.В эту книгу вошли двадцать лучших интервью последнего года. Читайте, если вам интересны биографии ярких людей. Читайте, если вам хочется больше узнать об истории построенных ими мощных компаний. Читайте, если вы ищете пути к успеху в Сети.
![HTML5 для веб-дизайнеров](/storage/book-covers/09/0985119312acf20aa4b10079955a4100c11a6692.jpg)
Джереми Кит обладает способностью писать легко и доступно о сложных вещах и сразу выделять те определенно важные моменты, которые имеют значение для дизайнеров-разработчиков. В книге «HTML5 для веб-дизайнеров» он рассказывает о современных тенденциях в области web-разработок.В HTML5 появилось много интересных тэгов, в том числе поддержка аудио– и видеофайлов. Теперь вам не надо тратить время на установку плагинов для проигрывания музыки или видео – просто воспользуйтесь одним из новых тегов.Автор убеждает, что можно использовать структурные элементы HTML5 прямо сейчас, например назначить стиль любому элементу, который вы захотите изобрести, или начать использовать доступные вам дополнительные уровни заголовков.Книга Джереми Кит – настоящая инструкция по использованию HTML5.