год-2010
240 страниц
Книга CSS ручной работы. Библиотека профессионала. Седерхольм посвящена современным технологиям веб-дизайна на основе CSS - каскадных таблиц стилей, использующихся при создании большей части современных интернет-сайтов. Издание затрагивает подобные вопросы как применение в веб-дизайне новых свойств CSS3, гибкая работа с цветом с помощью RGBA, работа с "плавающими" элементами, применение "резиновой" верстки и гибких элементов дизайна, искусство работы с типографикой, Jquery, фоновыми элементами, и массу иных аспектов по совершенствованию веб-дизайна при помощи технологий CSS. В дизайне нет мелочей; есть детали, которые оказываются максимально важными. "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
