Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS 37. Дизайнерская сила.


Радио Zen
Шкала настройки в виде фиксированного фонового изображения


Вдохновившись видом своего старенького радиоприемника, Марк ван ден Хойфель ре-
шил воспользоваться фиксированным фоновым изображением, чтобы создать образ шкалы настройки частот вместе со скользящим индикатором. Разметка была обусловлена заголовком, а поскольку индикатор перемещается по шкале горизонтально, то появление горизонтально прокручиваемой страницы
было почти неизбежно.
Классический облик подчеркнут шрифтом в стиле «ретро», фотографиями радиоприем-
ника, от которого все и пошло, и желтоватой цветовой гаммой, символизирующей состарившийся материал.

Готовим сцену

Если не считать изображений в заголовках, то в работе «Радио Zen» эффект достигается при минимальном использовании графики. Уникальный внешний вид горизонтального макета обеспечивают имеющиеся в CSS средства позиционирования.
Для начала ван ден Хойфель также скрыл текст обоих основных заголовков. Позже они послужат для размещения картинок, а пока пусть не мешаются:

ttpageHeader hi span, #pageHeader h2 span {
display: none;


Применены и некоторые другие базовые средства форматирования, здесь мы их не показываем, но при желании можно ознакомиться с исходным CSS-файлом. Прежде чем добавлять прокручиваемую шкалу, необходимо расчистить для нее место.
Основные особенности верстки Для размещения большей части элементов в «Радио
Zen» применяется абсолютное позиционирование, следовательно позиционированные элементы изымаются из нормального потока документа. Поскольку оставшиеся элементы ничего не знают о положении начала или конца абсолютно позиционированных элементов, то перекрытие неизбежно. На какое-то время
отвлечемся от этой проблемы, сразу расположив несколько элементов так, чтобы их края соприкасались; тогда перекрытия не будет. Соответствующие правила приведены ниже:

#quickSummary {
position: absolute;
right: Opx;
text-align: left;
width: 165px;
height: 340px;
top: 9 5px;
padding-top: 4Opx;
•preamble {
position: absolute;
left: lOpx;
text-align: right;
width: 165px;
top: 95px;
#supportingText {
position: absolute;
width: 123Opx;
padding: 95px 0 0 185px;
text-align: justify;
z-index: 3;
}
#linkList {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 0;
padding-top: 480px;
text-align: justify;
z-index: 1;


Этот план срабатывает, если размер шрифта в браузере по-прежнему составляет 10 рх, как было задано ранее. Но поскольку многие браузеры позволяют пользователю масштабировать текст, то перекрытие все же возможно. Мы еще вернемся к этой проблеме ниже.

Организация слоев и присоединение графики

Если вы еще не посмотрели, как оригинальный дизайн прокручивается по горизонтали, рекомендуем сделать это сейчас. Как ни странно, эффект достигается без использования сценариев. В «Радио Zen» изобретательно применены слои и значение f i x e d атрибута background-attachment. Поскольку изображение шкалы радиоприемника присоединено к элементу body статически, то при любой прокрутке страницы оно остается на месте, а оставшаяся часть страницы прокручивается поверх картинки. В правиле для элемента body есть строка, в которой заданы значения свойств background-image и background-position:


body {
font: 10px Georgia, Arial, Helvetica,
sans-serif;
color: #353638;
background: #F8F8EE(schaal.jpg) no-repeat
fixed top center;;...,...
margin: Opx;
А индикатор шкалы присоединяется к элементу
#supportingText:
#supportingText {
position: absolute;
width: 123Opx;
padding: 95px 0 0 185px;
text-align: justify;
:kground: #F8F8EE(naald.gif) top center
no-repeat;
z-index: 3;


Теперь должно быть понятно, почему для элемента # s u p p o r t ingText задана такая большая ширина: не просто для того, чтобы в нем поместились горизонтально выстроенные абзацы, но и чтобы гарантированно появилась полоса прокрутки, позволяющая наблюдать эффект перемещения индикатора.

Позиционирование колонок

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

#preamble {
position: absolute;
left: 10px;
text-align: right;
width: 165px;
top: 95px;
#supportingText h3 {
margin: 0 8px 0 3px;
}
#explanation, #participation
float: left;
width: 290px;
}
(•benefits {
float: left;
width: 150px;
}
•requirements {
float: left;
width: 500px;


Так гораздо лучше. Теперь вернемся к проблеме масштабируемого текста.

Проблема масштабируемого текста

Иногда текст, слишком длинный для отведенной под него области, начинает перекрывать другие элементы, поскольку при абсолютном позиционировании
элемент исключается из нормального потока документа. Как это выглядит, можно увидеть, просмотрев страницу с текущими стилями в браузере, поддерживающем масштабирование текста, для которого задана единица измерения рх, - например, в Firefox. Попробуйте увеличить размер шрифта и полюбуйтесь, что
произойдет со списком вариантов дизайна в нижней части страницы.
Конечно, стили для этой области еще не совсем готовы, но проблема останется, если не позаботиться о ней прямо сейчас. Возможно, вы уже обратили внимание,
что элемент # l i n k L i s t абсолютно позиционирован вверху страницы (свойство t o p равно 0), но смещен вниз за счет того, что свойство p a d d i n g - t o p равно
480 рх. Задание такого отступа располагает список вариантов дизайна ниже остальной части страницы на промежуточной фазе верстки страницы, но в конечном
счете это неважно, так как оба вложенных в него d i v все равно будут позиционированы абсолютно, поэтому отступ не сыграет роли:

ttlselect, #larchives, #lresources {
position: absolute;
text-align: left;
padding: 5px;
}
#lselect {
width: 1590px;
top: 46em;
background-color: #E8E9CF;
}
#larchives {
width: ЗООрх;
top: 49em;
left: 75px;
}
#lresources {
width: 800px;
left: 400px;
top: 49em;
}


Поскольку свойство t o p каждого d i v задано в единицах em, а не рх, то положение верхнего края будет меняться при изменении размера шрифта, что позволит избежать перекрытия. А после применения дополнительных стилей, показанных ниже, спи-
сок вариантов дизайна и список архивов в нижней части страницы станут, наконец, выглядеть так, как надо.

СОВЕТ
Применение значений, измеренных в em, в сочетании с абсолютным позиционированием заставляет браузер вычислять положение с учетом размера шрифта. Если же применяются единицы рх, то положение задается жестко и не пересчитывается при изменении размера окна браузера, даже если это
приводит к перекрытию.

- ПРИМЕЧАНИЕ
Мы еще не рассмотрели размещение картинок - в частности, заголовка и двух нижних изображений радиоприемника. Оставляем это в качестве упражнения для читателя. Впрочем, со всеми стилями можно ознакомиться в оригинальном CSS-файле для дизайна «Радио Zen».

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 22
Гостей: 16
Пользователи: - отсутствуют
Роботы: crawl Bot, Google Bot, Yandex Bot, Google Bot, MSN Bot, Yahoo Bot

20-ка посетителей: npqovjhuch, kerqbohuch, fqmkyviz26, zjExifide, taAnipse, gqbuaiqx88, kwdccghuch, jywrunhuch, josephvq1, lpImpaigN, deEquigue, wjzqbmhuch, fbyzzxhuch, ezjklqhuch, AgnesAccony, sfxufehuch, GahCoorashouh, hqNonfoula, valeriegs69, zisvaohuch


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги