Чтение онлайн

на главную - закладки

Жанры

CSS3 для веб-дизайнеров
Шрифт:

Наша работа – работа дизайнера – состоит не только в том, чтобы изготовить нарядную бутылку, которая будет красиво выглядеть, но, скорее, в том, чтобы найти способы обогатить содержимое и улучшить подачу. CSS3 уже помогает нам в этом.

Теперь вы знаете, почему наш пример отдает дань уважения тем посланиям, которые оставлены на Луне или летят через космос. Настало время поделить этот сайт на части, выделяя небольшие примеры, относящиеся непосредственно к CSS3. Я считаю разумным собрать в одном месте все приемы, которые мы будем обсуждать. Читатель сможет обращаться к этому шаблону и ко всем примерам когда угодно – все собрано в одной живой, дышащей веб-странице. Код этого

примера можно скачать с http://CSS3exp.com/code.

Каждая из оставшихся глав затрагивает отдельный набор примеров, связанных с CSS3. Вместо того чтобы пытаться включить все и рассказать все, что можно знать про CSS3, в этой главе я поступлю наоборот: погружусь в очень конкретные примеры, показывая, как они работают в выдуманном контексте. Эти примеры будут небольшими – такими, которые можно немедленно применять и расширять после прочтения следующих страниц.

Удивление и восторг

Дизайн под веб – такой особенный и интересный в сравнении со статическими носителями отчасти оттого, что веб-страницы интерактивны. В отличие от бумаги элементы могут реагировать на действия пользователя, двигаться и даже удивлять.

Именно интерактивность улучшается средствами CSS3 для тех браузеров, которые поддерживают эту технологию, но и не упускается для тех, которые не поддерживают.

Прекрасный образец того, как удивлять и восхищать с помощью CSS3, можно найти на сайте голландского дизайнера и разработчика Фарука Атеса . В боковом меню находится список ссылок на различные социальные сети, которые при наведении мыши раскрываются и оживают с помощью нескольких CSS3-эффектов и мягкого перехода (рис. 3.04).

Рис. 3.04. Боковое меню и реакция на наведение мыши – сайт Фарука Атеса

То, что выглядит обычным сдвинутым вправо списком, состоящим из текста и картинок, оказывается намного более интересным объектом, когда начинаешь взаимодействовать с ним. Это важнейший пример обогащенного взаимодействия, и Фарук использует разнообразные свойства CSS3, чтобы достичь этого эффекта.

Рис. 3.05 показывает, как выглядят состояние при наведении и обычное состояние в Internet Explorer 7, который никак не поддерживает CSS3. Можно заметить, что хоть состояние при наведении и небезупречно, сайтом по-прежнему можно пользоваться, информацию можно прочитать – сайт остается функциональным; не говоря о том, что основное состояние выглядит почти неизменно.

Рис. 3.05. В браузере IE7 сайт Фарука Атеса не демонстрирует тех же визуальных эффектов, но это в порядке вещей

Наведение на элемент (или фокусировка) – прекрасное место сайта, которое можно улучшать средствами CSS3. Пользователи Internet Explorer получат иное взаимодействие (пока в этот браузер не войдет поддержка свойств CSS3). Но это взаимодействие ничем не хуже, и, откровенно говоря, пользователи IE не узнают о том, что они упускают.

То есть – до тех пор, пока не откроют сайт на компьютере друга, где установлен браузер Safari, Chrome, Firefox или Opera (и почувствуют подступающую зависть).

Должны

ли сайты выглядеть полностью одинаково в каждом браузере?

Это важный вопрос (и вполне подходящий для того, чтобы задать его сейчас), и я пробую ответить на него на сайте с невероятно длинным доменным именем (рис. 3.06): http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.

Рис. 3.06. Необычно названный http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Как и пример Фарука, этот сайт становится интересным лишь тогда, когда начинаешь взаимодействовать с ним. На поверхности он выглядит практически одинаково во всех браузерах, но когда начинаешь двигать мышкой, прикасаясь к тексту и к фону, применяется набор свойств CSS3, переходов и трансформаций, чтобы сделать взаимодействие особенным и запоминающимся.

Опять-таки мы улучшаем дизайн именно внутри слоя взаимодействия. Основное содержимое, читаемость, юзабилити и разметка остаются одинаковыми и неизменными.

Рис. 3.07. Обогащенное взаимодействие раскрывается, когда начинаешь взаимодействовать с сайтом. Все благодаря CSS3

Навигация на Луне

Применим подход добавления CSS3 к состоянию hover непосредственно в наш пример. Я подробно расскажу каждый шаг на пути создания меню в верхней части сайта (рис. 3.08), в котором сочетаются

border-radius
,
text-shadow,
RGBA и CSS-переходы, чтобы построить взаимодействие, которое будет удивлять и восхищать.

Рис. 3.08. Меню в нашем примере улучшено в состоянии hover за счет CSS3

Сначала разметка

Так как мы приверженцы семантики, то разметка для меню будет состоять из обыкновенного списка.

<ul id="nav">
 

<li><a href="#">News</a></li>

<li><a href="#">Things</a></li>

<li><a href="#">Stuff</a></li>

<li><a href="#">Junk</a></li>

<li><a href="#">About</a></li>

</ul>

Разумеется, здесь нет ничего нового – лишь подходящая структура, к которой можно начать применять стили.

Сдвинем элементы

Сначала сдвинем весь список и добавим небольшой отступ, чтобы разместить меню в правой части страницы; затем сдвинем также каждый элемент списка.

Поделиться:
Популярные книги

Путь Шедара

Кораблев Родион
4. Другая сторона
Фантастика:
боевая фантастика
6.83
рейтинг книги
Путь Шедара

Кодекс Охотника. Книга XXI

Винокуров Юрий
21. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга XXI

Драконий подарок

Суббота Светлана
1. Королевская академия Драко
Любовные романы:
любовно-фантастические романы
7.30
рейтинг книги
Драконий подарок

Неудержимый. Книга XVIII

Боярский Андрей
18. Неудержимый
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Неудержимый. Книга XVIII

Сумеречный стрелок

Карелин Сергей Витальевич
1. Сумеречный стрелок
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Сумеречный стрелок

Уязвимость

Рам Янка
Любовные романы:
современные любовные романы
7.44
рейтинг книги
Уязвимость

Путь (2 книга - 6 книга)

Игнатов Михаил Павлович
Путь
Фантастика:
фэнтези
6.40
рейтинг книги
Путь (2 книга - 6 книга)

Я – Орк. Том 5

Лисицин Евгений
5. Я — Орк
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Я – Орк. Том 5

Совок

Агарев Вадим
1. Совок
Фантастика:
фэнтези
детективная фантастика
попаданцы
8.13
рейтинг книги
Совок

Авиатор: назад в СССР

Дорин Михаил
1. Авиатор
Фантастика:
попаданцы
альтернативная история
5.25
рейтинг книги
Авиатор: назад в СССР

На границе империй. Том 9. Часть 2

INDIGO
15. Фортуна дама переменчивая
Фантастика:
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 9. Часть 2

Доктора вызывали? или Трудовые будни попаданки

Марей Соня
Фантастика:
юмористическая фантастика
попаданцы
5.00
рейтинг книги
Доктора вызывали? или Трудовые будни попаданки

Совершенный: пробуждение

Vector
1. Совершенный
Фантастика:
боевая фантастика
рпг
5.00
рейтинг книги
Совершенный: пробуждение

Энфис 4

Кронос Александр
4. Эрра
Фантастика:
городское фэнтези
рпг
аниме
5.00
рейтинг книги
Энфис 4