CSS3 - новейший стандарт веб-разработок, серьезно расширяющий функциональные возможности языков веб-программирования и дающий возможность реализовать оригинальные визуальные решения для ваших интернет-проектов. При помощи CSS3 вы сможете создавать подобные привлекательные эффекты, как полупрозрачные фоны, градиенты и тени; применять оригинальные шрифты, как правило не применяющиеся в Интернете; вводит на сайтах анимацию без эксплуатации Flash; предоставить пользователям возможность персонифицировать дизайн ресурса без использования JAVASCRIPT. Вы узнаете в книге
Сила CSS3. Освой новейший стандарт веб-разработок! Джилленуотер , как средствами CSS реализовать большое число практических задач, решая по ходу работы с книгой разные учебные примеры. Как сделать потрясающий дизайн с уникальной типографикой и графическими элементами? Как применять CSS3 для улучшения юзабилити вашего ресурса? Как обеспечить поддержку новых возможностей CCS3 для устаревших браузеров? Как создавать веб-дизайн для мобильных версий ресурса? Ответы на эти и иные вопросы вы найдете в данной книжке.
Оглавление
введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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
дОбавление Падающей тени . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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
гОтОвая страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
глава 7 . всПОминаем навыки верстки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
в этОм урОке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250
изменения близятся . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250
сОздание мнОгОстОлбцОвых макетОв без Плавающих ПОлей и ПОзициОнирОвания . .251
вОзвращаемся в действительнОсть: ЧтО рабОтает сейЧас . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .274
альтернативы мОдели гибкОгО ПОля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286
ПрилОжение A . ПОддержка в браузерах . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297
заклюЧение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303
