таблиц стилей, использующихся при создании большинства современных интернет-сайтов. Издание затрагивает такие вопросы, как использование в веб-дизайне новых свойств CSS3, гибкая работа с цветом при помощи RGBA, работа с «плавающими» элементами, использование «резиновой» верстки и гибких элементов дизайна, искусство работы с типографикой, jQuery, фоновыми элементами, а также массу других аспектов по совершенствованию веб-дизайна с помощью технологий CSS.
В дизайне нет мелочей; есть детали, которые оказываются наиболее важными. «CSS
ручной работы» — это книга о таких деталях, которые отличают хороший веб-дизайн от
бестеллеров по искусству веб-дизайна, в том числе знаменитый «Пуленепробиваемый веб-
Введение 11
О чем эта книга 14
Пуленепробиваемый дизайн 14
Прогрессивное оформление 15
Переоценка старых методов и самых лучших технических приемов 16
Для кого эта книга? 16
Некоторые исходные предположения 17
HTML ручной работы? 17
Обнуление стилей 18
Наш учебный пример 19
Глава 1. Всегда задавайтесь вопросом: «А что, если…?» 21
Простой список ссылок 24
Блоковые ссылки 24
Разметка 25
Задаем стиль ссылки 25
Задаем стиль цены 26
Расположение цены 26
Незапланированное наложение 27
Что, если будет изменен размер текста? 28
Угадать размер контента 29
Ситуация, в которой стоит использовать абсолютное позиционирование 29
Улучшаем гибкость при помощи свойства Float 30
Новый порядок разметки 31
Как сделать цену плавающим элементом 31
Тест на изменение размера текста 32
Более оптимальный порядок разметки 32
Задаем ширину плавающих элементов 34
А как насчет таблицы? 35
Заключение блоковых элементов в тег ссылки 36
Добавим визуализацию данных 37
Добавляем данные в разметку 38
Применяем базовые стили 38
Как скрыть значение в процентах и создать полоску 39
Как решить проблемы в Internet Explorer 6 42
Выбирая правильное решение 44
Глава 2. Закругленные углы с помощью свойства border-radius 47
Закругление раньше и сейчас 50
Создание закругленного блока фиксированной ширины 50
Создание закругленного блока переменной ширины 52
Проблема с цветом и радиусом 54
Свойство border-radius 55
Расширения, специфичные для производителей 56
Прогрессивное оформление с помощью –webkit -border-radius и -moz-border-radius 57
Взгляд в будущее 58
Как закруглить конкретные углы 59
Небольшая проблема в Firefox 2 60
При низком контрасте — очень даже неплохо 61
Отсечение фона . 62
Простая гиперссылка 62
Создание фонового PNG-изображения 63
Стили, которые создают кнопку 64
Как просто задать состояния :hover 65
Как добавить границу 66
Отсечение фона не работает в Firefox 2 67
Закругление элементов формы 67
Простая разметка формы 68
Применение базовых стилей 68
Добавление фона и изменение границ 69
Создание эффекта глубины 70
Улучшение оформления с помощью свойств border и border-radius 71
Объявление стиля :focus 73
Как насчет других браузеров? 73
Ничего страшного 74
Прямоугольная кнопка 75
Прямоугольные элементы 75
Прогрессивное оформление 75
Замечательно для создания прототипа 76
Глава 3. Гибкая работа с цветом при помощи RGBA 77
Что такое RGBA? 80
Свойство opacity против RGBA 82
Когда перестает работать свойство opacity 83
Совместимость . 85
А как насчет других браузеров? 86
Создание резервных правил для неполноценных браузеров 86
Заполнение PNG-изображениями 87
Превосходный инструмент для создания прототипа 89
Не только фон 89
Уменьшение насыщенности шрифта с помощью RGBA 89
Wilsonminer.com 91
Как запросто добавить hover-эффект 92
Раскраска по номерам 93
Создание раздела This Week’s Specials 94
Создание разметки 95
Как сделать список горизонтальным 96
Добавление границы с закругленными углами 97
Добавление накладываемого изображения 98
Стили названия и цены 99
Добавление RGBA к накладываемому изображению 100
В заключение 101
Глава 4. Должны ли сайты выглядеть одинаково во всех браузерах? 103
Ответ, который я считаю правильным 106
«Это бонус» против «Дизайн испорчен» 107
Все решают руководители 108
Все становится проще, если руководитель — вы 110
Все сводится к статистике 113
Еще несколько новых свойств CSS, которые работают уже сейчас 113
Свойство text-shadow 114
Свойство box-shadow 117
Свойство -webkit-transition 121
В заключение 126
Глава 5. Управление плавающими блоками 127
Еще раз о плавающих элементах 130
Метод Easy Clearing 132
Использование класса .clearfix 132
Дополнительные правила для IE6 и 7 133
Добавление класса .clearfix в разметку 134
Семантическая дилемма 134
Одно из возможных решений: большой и длинный список 135
Выбор более подходящего имени класса 138
Создание класса .group в таблице стилей 138
Создайте стиль и забудьте об этом 140
Фреймворки для мастеров 141
Создайте свой фреймворк 142
Index.html 142
screen.css 149
reset.css 150
master.css 152
ie.css 154
Ваш фреймворк может отличаться 155
Использование класса .group в шаблоне Tugboat 156
Перемещение модулей 157
В заключение 158
Глава 6. «Резиновая» сетка 159
Крупный заказ 163
Проблема с фиксированной шириной 165
Больше решений, меньше пены! 167
Гибкость за счет… размера шрифта? 168
Вопрос контекста 171
Смена контекста 174
Пилите, Шура, пилите 176
Больше «резины», больше сеток, больше радости 177
От макета к разметке 180
Дежа вю: знак деления 182
Столбцы, контекст и изменения — подумать только! 186
«Резиновые» элементы 189
Это вам не просто тег img 189
IE и его далеко не совершенная реализация CSS — сидели на трубе 193
Проблема платформ (точнее, одной платформы) 194
В заключение 201
Глава 7. Тонкости мастерства 203
Применяйте самый лучший амперсанд из доступных 206
Как найти своего внутреннего Брингхерста 207
Правило 5.1.3 208
Мы с самого начала придерживались идеи прогрессивного оформления 209
Мы, кажется, говорили об амперсандах? 210
Встраивание шрифтов с помощью CSS 212
Добавление @font-face в шаблон Tugboat 213
Поддержка @font-face 214
Проблема лицензирования 215
Бесплатные (пока) шрифты 215
Typekit 217
jQuery 218
Использование jQuery в шаблоне Tugboat 219
Использование jQuery для добавления класса.last 225
Галопом по Европам 231
Движущийся фон (многоуровневый скроллинг для ленивых) 231
Партизанская тактика 232
Эффект «многоуровневости» для ленивых 234
Заключение 238
