Навигация

Партнеры


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

CSS 40.  Дизайнерские фичи



Открытое окно
Один дизайн, три макета


На работу «Открытое окно» Рэя Генри вдохновила фотография, которую он сначала пла
нировал использовать в качестве главного визуального элемента. Но убоявшись, что
результат будет слишком предсказуем, он решил поискать новые подходы. Ему приходилось видеть верстку с фиксированными элементами для навигации и баннеров, но никогда не встречался дизайн, где бы наиболее существенные элементы размепдались в нижней, а не верхней части страницы.
Так как Internet Explorer для Windows не поддерживает фиксированного позиционирования, то Генри понимал, что ему придется приложить дополнительные усилия для того, чтобы дизайн выглядел приемлемо в разных браузерах. Поэтому он прибег к различным трюкам, чтобы во всех современных браузерах был виден тот или иной аспект «Открытого окна».

Фундамент


Начав с элементов body и c o n t a i n e r , Генри отключил выставляемые по умолчанию поля и отступы и задал шрифты:

body#css-zen-garden {
background: #A1B4CD;
margin: 0;
padding: 0;
font-family: Verdana, arial, sans-serif;
font-size: llpx;
}


Далее он задал для блока # c o n t a i n e r ширину 100%, выбрав тем самым текучую верстку, при которой страница заполняет всю площадь окна:

#container {
width: 100%;
text-align: left;


В данный момент верстка выглядит одинаково во всех браузерах. Стилизация раздела Intro После позиционирования элемента # i n t r o дизайн становится намного интереснее:

#intro {
width: 100%;
height: 276px;
}
html>body div#intro
position: fixed;
bottom: Opx;
right: 0;
html*#intro {
border-bottom: 3px solid #fff;
position: fixed;
bottom: -lOpx;
}
#intro {
height: 286px;
voice-family: " \ " } \ " ";
voice-family: inherit;
height: auto;


В этих правилах вы найдете целый ряд приемов, призванных «подсунуть» каждому браузеру свой стиль. Первый селектор # i n t r o распознается всеми браузерами. Следующие два правила предназначены только для браузеров, поддерживающих фиксированное позиционирование, при этом третье содержит описание
рамки, которое Internet Explorer 6 для Windows интерпретирует правильно. Наконец, вы видите трюк на основе модели прямоугольных областей (Box Model Hack), которым Генри воспользовался, чтобы компенсировать ошибку при вычислении высоты в правиле # i n t r o , характерную для Internet Explorer 5.
Теперь в Internet Explorer раздел # i n t r o находится в верхней части страницы (рис. 3) и имеет белую нижнюю рамку. В то же время в браузерах Mozilla и Safari этот раздел фиксирован и расположен внизу.

Вверх, вниз, вправо,влево


На данный момент верхняя и нижняя части страницы определены. На самом деле это, конечно, один и тот же раздел. Продолжая применять фильтрацию, Генри добавил стили, которые отображают структурные элементы в нижней или верхней части в зависимости от браузера.

Шаг вправо...


Сначала добавляется фотография, которая определяет цветовую гамму:

#pageHeader {
background: urllpageHead_bg.jpg) no-repeat
top left;
width: 332px;
height: 283px;
position: absolute;
right: 0;


Это правило позиционирует раздел #pageHeader и в Internet Explorer, и в Mozilla, хотя, как видите, положение определяется относительно того места, куда браузер поместил фиксированный раздел. Интересно, что в браузере Opera карт - фотоинка пока не видна, с этим еще предстоит повозиться.

Прыжок влево...


Следующие правила CSS задают стиль для раздела #preamble, правда, из соображений экономии места мы не приводим некоторые правила для внутренних
элементов:

#preamble {
background: #A1B4CD url(preamble_bg.gif)
repeat-у top right;
height: 283px;
width: 312px;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
}
html>body #preamble {
position: absolute;
left: 0;
}


Снова вы видите, как селектор #preamble задает способ позиционирования блока, причем для браузеров, поддерживающих селекторы дочерних элементов, этот блок в следующем правиле прижимается к левому краю.

А теперь в середину


Раздел #quickSuimary Генри поместил точно посередине между #pageHeader и ttpreamble:

#quickSummary {
background: url(quickSum_bg.gif) repeat-x top
right;
border-right: 3px solid #fff;
margin: 0 332px 0 312px;
padding: 52px 0 0 0; .
height: 283px;
voice-family: " \ " } \ "";
voice-family: inherit;
height: 231px;
i


Единственный трюк здесь - это Box Model Hack в разделе #quickSummary. Он нужен, чтобы исправить ошибку при вычислении высоты в браузерах, где некорректно
реализована модель прямоугольных областей.
В этот момент все три варианта верстки более-менее видимы. В Internet Explorer раздел отображается целиком вдоль верхнего края, а в Mozilla он виден частично и находится внизу. Кстати, коечто начало уже проявляться и в браузере Opera.

Стилизация контента и ссылок


Следующий шаг - применить стили к контенту и ссылкам. Все правила можно посмотреть в исходном CSS-файле на сайте Zen Garden, но некоторые наиболее интересные заслуживают упоминания здесь. Прежде всего, обратите внимание на то, как с помощью свойства f l o a t контент перемещен в левую часть страницы:

#supportingText {
width: 100%;
float: left;
margin-right: -332px;
margin-top: -3px;
}


Интересно отметить, что даже при ширине 100% отрицательные поля позволяют управлять внешним видом текстового контента. Отрицательное значение
m a r g i n - r i g h t дает тот же эффект, что положительное значение p a d d i n g - r i g h t , и гарантирует, что текст не выйдет за пределы области, ограниченной
левым краем фотографии. Однако в случае, когда ширина равна 100%, использовать свойство paddingr i g h t нельзя, поскольку тогда ширина элемента #support ingText оказалась бы равна 100% + 332рх.
К разделу # f o o t e r применяются стили, учитывающие различия между браузерами:

#footer {
background: #d6e0ee;
margin: 0 332px 0 0;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
padding: 15px 0;
text-align: center;
}
html>body #footer {
background: transparent;
position: fixed;
right: 0;
bottom: 261px;
padding: 0;
margin: 0 160px 0 0;
border-right: 0;
border-top: 0;
border-bottom: 0;
text-align: left;


В результате хвостовик оказывается в верхней видимой части страницы для Internet Explorer и в нижней части для Mozilla.

А теперь займемся браузером Opera


К этому моменту мы все сделали для браузеров Internet Explorer, Mozilla и Safari, но в Opera нужно еще заставить верхние разделы отображаться правильно. Вот фрагмент CSS для браузера Opera:

Smedia all and (min-width: Opx) {
div#intro {
position: absolute;
right: 0;
width: 100%;
height: 283px;
top: 0;
z-index: 0;
border-bottom: 3px solid #fff;


Этот прием использует часть спецификации CSS3 и позволяет адресовать стили браузеру Opera 7 и только ему. Вот теперь все хорошо выглядит и в Opera.

Три в одном


Оригинальная идея работает как задумано в браузерах Mozilla и Safari; для Internet Explorer найден обходной путь, позволяющий приемлемо отобразить страницу,
а для Opera пришлось пойти на компромисс - фотография находится вверху, но, в отличие от Internet Explorer, она фиксирована, так что страница прокручивается под ней. Своим названием работа «Открытое окно» обязана соотношению между верхом и низом, найденному в результате экспериментов Генри.













css abxb

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



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



Поиск

***

Онлайн
Всего на сайте: 24
Гостей: 19
Пользователи: 1991.igori94Bep
Роботы: Yandex Bot, Google Bot, crawl Bot, Yahoo Bot

20-ка посетителей: 1991.igori94Bep, qgdoosque, zrEquigue, Opeplarmepaws, FozzPaut, vokolokosa, oodoosque, borya.15.nBep, crab22, lpImpaigN, urlekxTet, VeronikaWab, Trmgam, Pdenniava, AgnesAccony, Scottbrups, KawaPaut, bvthoumb, ALOB, eythoumb


Партнеры

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

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

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

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