Table Of ContentЗои Джилленуотер
Сила CSS3. Освой новейший стандарт веб-разработок!
Серия «Библиотека специалиста»
Перевела с английского Е. Шикарева
Заведующий редакцией А. Кривцов
Руководитель проекта А. Юрченко
Ведущий редактор Ю. Сергиенко
Литературный редактор О. Некруткина
Художественный редактор Л. Адуевская
Корректоры М. Водолазова, В. Нечаева
Верстка Л. Родионова
ББК 32.099.02-018 УДК 004.7
Джилленуотер З.
Д41 Сила CSS3. Освой новейший стандарт веб-разработок! — СПб.: Питер, 2012. —
304 с.: ил.
ISBN 978-5-459-01206-4
CSS3 — новейший стандарт веб-разработок, значительно расширяющий функциональные
возможности языков веб-программирования и позволяющий реализовать оригинальные визу-
альные решения для ваших интернет-проектов. С помощью CSS3 вы сможете создавать такие
привлекательные эффекты, как полупрозрачные фоны, градиенты и тени; использовать ориги-
нальные шрифты, обычно не применяющиеся в Сети; внедрять на сайтах анимацию без исполь-
зования Flash; предоставить пользователям возможность персонифицировать дизайн сайта без
применения JavaScript. Вы узнаете, как средствами CSS реализовать множество практических
задач, решая по ходу работы с книгой разнообразные учебные примеры.
Как создать потрясающий дизайн с уникальной типографикой и графическими элементами?
Как использовать CSS3 для улучшения юзабилити вашего сайта? Как обеспечить поддержку но-
вых возможностей CCS3 для устаревших браузеров? Как создавать веб-дизайн для мобильных
версий сайта? Ответы на эти и многие другие вопросы вы найдете в данной книге.
ISBN 978-0321722133 англ. © Zoe Gillenwater, 2011
ISBN 978-5-459-01206-4 © Перевод на русский язык ООО Издательство «Питер», 2012
© Издание на русском языке, оформление ООО Издательство «Питер», 2012
Права на издание получены по соглашению с New Riders Publishing. Все права защищены. Никакая часть данной
книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев ав-
торских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надеж-
ные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гаранти-
ровать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки,
связанные с использованием книги.
ООО «Мир книг», 198206, Санкт-Петербург, Петергофское шоссе, 73, лит. А29.
Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная.
Подписано в печать 29.11.11. Формат 70х100/16. Усл. п. л. 24,510. Тираж 2000. Заказ
Отпечатано в соответствии с предоставленными материалами в ЗАО «ИПК Парето-Принт».
Тверь, www.pareto-print.ru.
Мистеру Баткасу,
который учил меня HTML и Photoshop 4
в Downers Grove North High School
О
главление
введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
глава 1 . ОснОвная инфОрмация О CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
ЧтО такОе CSS3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
ПОддержка браузерами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Преимущества CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
разбОр ситуации: центр изуЧения безОПаснОсти на дОрОгах . . . . . . . . . . . . . . . . . . . . . . . . . . .27
грамОтнОе исПОльзОвание CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
глава 2 . ОблаЧка с текстОм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
базОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
ОграниЧение длины стрОки в бОльшОм блОке текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
графиЧеские эффекты без графики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
трансфОрмирОвание аватарОв . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94
гОтОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
глава 3 . линОванная бумага . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
базОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
услОжнение фОна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Оглавление • 7
дОбавление Падающей тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
встраивание уникальных шрифтОв . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
гОтОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150
глава 4 . стилизация изОбражений и ссылОк
в зависимОсти От их тиПа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
базОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
ЧтО такОе селектОры атрибутОв? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
ОбОзнаЧение тиПа файла с ПОмОщью динамиЧески дОбавляемых знаЧкОв . . . . . . . . . .157
разные варианты стилизации ПОлнОразмерных фОтОграфий и эскизОв . . . . . . . . . . . . . .163
гОтОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168
глава 5 . ПОвышение эффективнОсти за сЧет ПсевдОклассОв . . . . . . . . . 171
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172
выбОр ОПределенных элементОв без исПОльзОвания идентификатОрОв и классОв . . . .172
динамиЧеская ПОдсветка разделОв страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185
глава 6 . разные размеры экрана, разный дизайн . . . . . . . . . . . . . . . . . . . . . 211
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
базОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
ЧтО такОе медиазаПрОсы? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
ПОдгОнка макета ПОд бОльшОй экран . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
изменение макета ПОд небОльшОй экран . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226
изменение макета для ПрОсмОтра на мОбильных устрОйствах . . . . . . . . . . . . . . . . . . . . . . . .230
ОбхОдные Пути для не ПОддерживающих данную вОзмОжнОсть браузерОв . . . . . . . . . . .246
гОтОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247
8 • О главление
глава 7 . всПОминаем навыки верстки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250
изменения близятся . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250
сОздание мнОгОстОлбцОвых макетОв без Плавающих ПОлей и ПОзициОнирОвания . .251
вОзвращаемся в действительнОсть: ЧтО рабОтает сейЧас . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .274
альтернативы мОдели гибкОгО ПОля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
ПрилОжение A . ПОддержка в браузерах . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
заклюЧение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303
в
ведение
10 • Введение
CSS3, новейшая версия языка таблиц стилей для сетевого контента, разрабатывалась
не столько с прицелом на нечто доселе невиданное, сколько для того, чтобы вы могли
лучше реализовывать уже знакомые замечательные эффекты веб-дизайна. Теперь
вы можете применять фантастические новые методы — более производительные и
дающие более практичные и гибкие результаты, нежели те, которые использовались
в течение последнего десятилетия.
Стандарт CSS3 до сих пор меняется и развивается — так же как браузеры, которые
в конечном итоге будут его поддерживать, и веб-дизайнеры, которым предстоит понять,
как наилучшим образом применять новые спецификации для достижения своих целей.
Как вы увидите, CSS3 позволяет создавать поразительно красивые и впечатляющие
эффекты. Но если эти эффекты невозможно использовать в реальном мире, для суще-
ствующих браузеров и веб-сайтов, то какой в них смысл? Цель этой книги — обучить
вас самым передовым методам CSS, способным воистину усовершенствовать ваши
сайты. И, что самое важное, эти методы можно применять прямо сейчас.
Эта книга — не энциклопедия и не справочное руководство по CSS3; вы не найдете
здесь описания каждого свойства, селектора и значения, появившихся в CSS начиная
с версии 2.1. Однако изучив представленные в книге практичные и инновационные
проекты, вы узнаете о самых популярных, полезных и хорошо поддерживаемых
возможностях CSS3. Каждая глава (за исключением главы 1) содержит одно или не-
сколько пошаговых упражнений, основанных на новых методах CSS3. Результатом
каждого упражнения станет готовая веб-страница или фрагмент страницы. Вы смо-
жете адаптировать эти упражнения к собственным проектам или просто черпать в
них вдохновение для творческого применения новых свойств, селекторов и значений.
В определенном смысле CSS3 представляет собой не только новый способ разра-
ботки страниц, но и новый способ мышления. Человеку, который годами занимался
созданием веб-сайтов и не может представить себе рамку поля, содержащую изо-
бражение, сложно понять контекст применения нового свойства border-image. Вот
почему я привожу списки рекомендаций по использованию каждого из рассмо-
тренных свойств, селекторов и значений CSS3. Эти списки дополняют изученные в
упражнении варианты. Надеюсь, что мне удастся в достаточной степени вдохновить
вас на внедрение новых методов CSS3 в собственные проекты. Кроме этого, мне
хотелось бы дать вам всю необходимую техническую информацию. Моя главная
цель — сделать работу с CSS3 комфортной и эффективной для вас.
Ц
елеваяаудитория
Эта книга предназначена для тех, у кого уже есть опыт использования CSS и кто же-
лает перевести свои сайты и навыки разработки на совершенно новый качественный
уровень. Я предполагаю, что вам знакомы синтаксис и терминология HTML и CSS,
но вы не обязаны быть экспертом по CSS, и, разумеется, я не ожидаю, что вы уже
стали знатоком новинок CSS3. Независимо от того, как давно вы занимаетесь раз-
