| Введение | 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 |
| Добавление RGB А к накладываемому изображению | 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 |
| Дополнительные правила для IЕ6 и 7 | 133 |
| Добавление класса .clearfix в разметку | 134 |
| Семантическая дилемма | 134 |
| Одно из возможных решений: большой и длинный список | 135 |
| Выбор более подходящего имени класса | 138 |
| Создание класса .group в таблице стилей | 138 |
| Создайте стиль и забудьте об этом | 140 |
| Фреймворки для мастеров | 141 |
| Создайте свой фреймворк | 142 |
| lndex.html | 142 |
| screenxss | 149 |
| reset.css | 150 |
| master.css | 152 |
| ie.css | 154 |
| Ваш фреймворк может отличаться | 155 |
| Использование класса .group в шаблоне Tugboat | 156 |
| Перемещение модулей | 157 |
| В заключение | 158 |
| |
| Глава б. «Резиновая» сетка | 159 |
| |
| Крупный заказ | 163 |
| Проблема с фиксированной шириной | 165 |
| Больше решений, меньше пены! | 167 |
| Гибкость за счёт… размера шрифта? | 168 |
| Вопрос контекста | 171 |
| Смена контекста | 774 |
| Пилите, Шура, пилите | 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-fасе | 214 |
| Проблема лицензирования | 215 |
| Бесплатные (пока) шрифты | 215 |
| Typekit | 217 |
| jQuery | 218 |
| Использование jQuery в шаблоне Tugboat | 219 |
| Использование jQuery для добавления класса .last | 225 |
| Галопом по Европам | 231 |
| Движущийся фон (многоуровневый скроллинг для ленивых) | 231 |
| Партизанская тактика | 232 |
| Эффект «многоуровневости» для ленивых | 234 |
| Заключение | 238 |
