Книга посвящена современным технологиям веб-дизайна на основе CSS - каскадных таблиц стилей, использующихся при создании большинства современных интернет-сайтов. Издание затрагивает такие вопросы как использование в веб-дизайне новых свойств CSS3, гибкая работа с цветом при помощи RGBA, работа с "плавающими" элементами, использование "резиновой" верстки и гибких элементов дизайна, искусство работы с типографикой, jQuery, фоновыми элементами, а также массу других аспектов по совершенствованию веб-дизайна с помощью технологий CSS. В дизайне нет мелочей; есть детали, которые оказываются наиболее важными. "CSS ручной работы" - это книга о таких деталях, которые отличают хороший веб-дизайн от первоклассного.
Название: CSS ручной работы Автор: Седерхольм Д., Маркотт И. Издательство: Питер Год: 2011 Страниц: 240 Формат: PDF Размер: 174 МБ ISBN: 978-5-49807-749-9, 978-0321643380 Качество: Хорошее Серия или Выпуск: Библиотека специалиста
Содержание:
Введение О чем эта книга Пуленепробиваемый дизайн Прогрессивное оформление Переоценка старых методов и самых лучших технических приемов Для кого эта книга? Некоторые исходные предположения HTML ручной работы? Обнуление стилей Наш учебный пример Глава 1. Всегда задавайтесь вопросом: «А что, если…?» Простой список ссылок Блоковые ссылки Разметка Задаем стиль ссылки Задаем стиль цены Расположение цены Незапланированное наложение Что, если будет изменен размер текста? Угадать размер контента Ситуация, в которой стоит использовать абсолютное позиционирование Улучшаем гибкость при помощи свойства Float Новый порядок разметки Как сделать цену плавающим элементом Тест на изменение размера текста Более оптимальный порядок разметки Задаем ширину плавающих элементов А как насчет таблицы? Заключение блоковых элементов в тег ссылки Добавим визуализацию данных Добавляем данные в разметку Применяем базовые стили Как скрыть значение в процентах и создать полоску Как решить проблемы в Internet Explorer 6 Выбирая правильное решение Глава 2. Закругленные углы с помощью свойства border-radius Закругление раньше и сейчас Создание закругленного блока фиксированной ширины Создание закругленного блока переменной ширины Проблема с цветом и радиусом Свойство border-radius Расширения, специфичные для производителей Прогрессивное оформление с помощью -webkit -border-radius и -moz-border-radius Взгляд в будущее Как закруглить конкретные углы Небольшая проблема в Firefox 2 При низком контрасте - очень даже неплохо Отсечение фона Простая гиперссылка Создание фонового PNG-изображения Стили, которые создают кнопку Как просто задать состояния: hover Как добавить границу Отсечение фона не работает в Firefox 2 Закругление элементов формы Простая разметка формы Применение базовых стилей Добавление фона и изменение границ Создание эффекта глубины Улучшение оформления с помощью свойств border и border-radius Объявление стиля: focus Как насчет других браузеров? Ничего страшного Прямоугольная кнопка Прямоугольные элементы Прогрессивное оформление Замечательно для создания прототипа Глава 3. Гибкая работа с цветом при помощи RGBA Что такое RGBA? Свойство opacity против RGBA Когда перестает работать свойство opacity Совместимость А как насчет других браузеров? Создание резервных правил для неполноценных браузеров Заполнение PNG-изображениями Превосходный инструмент для создания прототипа Не только фон Уменьшение насыщенности шрифта с помощью RGBA Wilsonminer.com Как запросто добавить hover-эффект Раскраска по номерам Создание раздела This Week's Specials Создание разметки Как сделать список горизонтальным Добавление границы с закругленными углами Добавление накладываемого изображения Стили названия и цены Добавление RGBA к накладываемому изображению В заключение Глава 4. Должны ли сайты выглядеть одинаково во всех браузерах? Ответ, который я считаю правильным «Это бонус» против «Дизайн испорчен» Все решают руководители Все становится проще, если руководитель - вы Все сводится к статистике Еще несколько новых свойств CSS, которые работают уже сейчас Свойство text-shadow Свойство box-shadow Свойство -webkit-transition В заключение Глава 5. Управление плавающими блоками Еще раз о плавающих элементах Метод Easy Clearing Использование класса .clearfix Дополнительные правила для IE6 и 7 Добавление класса. clear4x в разметку Семантическая дилемма Одно из возможных решений: большой и длинный список Выбор более подходящего имени класса Создание класса .group в таблице стилей Создайте стиль и забудьте об этом Фреймворки для мастеров Создайте свой фреймворк Index.html screen.css reset.css master.css ie.css Ваш фреймворк может отличаться Использование класса .group в шаблоне Tugboat Перемещение модулей В заключение Глава 6. «Резиновая» сетка Крупный заказ Проблема с фиксированной шириной Больше решений, меньше пены! Гибкость за счет… размера шрифта? Вопрос контекста Смена контекста Пилите, Шура, пилите Больше «резины», больше сеток, больше радости От макета к разметке Дежа вю: знак деления Столбцы, контекст и изменения - подумать только! «Резиновые» элементы Это вам не просто тег img IE и его далеко не совершенная реализация CSS - сидели на трубе… Проблема платформ (точнее, одной платформы) В заключение Глава 7. Тонкости мастерства Применяйте самый лучший амперсанд из доступных Как найти своего внутреннего Брингхерста Правило 5.1.3 Мы с самого начала придерживались идеи прогрессивного оформления Мы, кажется, говорили об амперсандах? Встраивание шрифтов с помощью CSS Добавление @font-face в шаблон Tugboat Поддержка @font-face Проблема лицензирования Бесплатные (пока) шрифты Typekit jQuery Использование jQuery в шаблоне Tugboat Использование jQuery для добавления класса. last Галопом по Европам Движущийся фон (многоуровневый скроллинг для ленивых) Партизанская тактика Эффект «многоуровневости» для ленивых Заключение
