Навигация

Партнеры


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

CSS 36. Дизайнеру на заметку.

Реконструкция

Можно сесть и завести разговор о теории, которая всем нам нравится, но если не засу-
чить рукава и не заняться самостоятельно сборкой головоломки, которую представля-
ет собой дизайн на основе CSS, то все эти рассуждения останутся туманными и беспоч-
венными.
Чтобы вы могли попрактиковаться, мы отобрали шесть вариантов дизайна CSS Zen Garden и проанализировали процесс создания таблицы стилей для каждого из них. Пройдите этот путь с нами, и вы станете лучше понимать процедуры и методы, применяемые в современном дизайне на основе CSS.

Живая изгородь
Фоновые картинки сливаются с переменным передним планом


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

Очертим границы

Прежде чем включать картинки в дизайн, нужно задать несколько основных параметров. Мире воспользовался версткой с фиксированной шириной, хотя изображение в заголовке повторяется и заполняет всю ширину окна. Центральная часть страницы ограничена областью шириной 732 пикселя. Раздел # c o n t a i n e r
содержит все остальные элементы, поэтому ограничения применяются именно к нему:

body {
margin: 0;
padding: 0;
color: #888;
text-align: center;
#container {
position: relative;
padding: 0;
width: 732px;
margin: 0 auto; :
text-align: left;


Ширина раздела # c o n t a i n e r установлена равной 732 px, а объявление свойства margin центрирует его по горизонтали, поскольку значение a u t o отводит под
поля все оставшееся пространство за вычетом ширины самого контейнера. Поскольку для элемента body свойство t e x t - a l i g n установлено в c e n t e r , то для
выравнивания содержимого ttcontainer на левую границу нужно отменить это правило и задать значение l e f t . Internet Explorer для Windows версий 5.0 и 5.5 не
интерпретирует описанные выше значения свойства margin как должно, поэтому и применен этот простой обходной прием, чтобы расположить # c o n t a i n e r по
центру страницы. Добавив еще стили для цветов ссылок, мы увидим страницу.

Расположение колонок

Следующий шаг - скрыть различные заголовки, чтобы они не портили верстки в колонку.

hi span, h2 span, h3 span, #quickSummary p.p
span {
display: none;


Основная область контента уже определена, так что можно переходить к трем расположенным внутри нее колонкам. Разметка сайта CSS Zen Garden затрудняет реализацию того, что задумал Мире: центральная колонка включает разделы ttpreamble и # s u p p o r t i n g T e x t , но не существует отдельного
элемента, который заключал бы оба эти раздела и к которому можно было бы применить стиль. Поэтому к ttpreamble и # s u p p o r t i n g T e x t придется
применять стили по отдельности, чтобы визуально они выглядели как часть одной колонки:

#preamble {
position: relative;
left: 195рх;
padding-bottom: Opx;
width: 40Opx;
}
#supportingText {
position: relative;
left: 195px;
padding-bottom: Opx;
border-bottom: 2px solid #363;
width: 40Opx;


Для каждого элемента задана ширина 400 пикселей, а за счет относительного позиционирования они отодвинуты от левой границы на 195 пикселей, вследствие
чего и образуют центральную колонку. Того же эффекта можно было бы добиться, задав значение свойства m a r g i n - l e f t , но в оригинальном CSS-файле сделано именно так, как написано выше.
Следующий шаг - разместить в нужном месте боковой контент. Сейчас список ссылок, который должен оказаться слева, находится в самом низу страницы; для перемещения его наверх применяется абсолютное позиционирование:

ttlinkList {
posit ion:absolute;
top: 200px;
left: 0;
width: 190px;
}
#quickSummary p.pi {
position: absolute;
top: 12em;
right: 15px;
width: 12Opx;
margin: 7 5px 0 0 58Opx;
font-size: 80%;
text-align: right;
}
ttquickSummary p.p2 {
position: absolute;
top: 25em;
width: 120px;
margin: 0;
font-size: 93%;
text-align: center;
padding-bottom: 90px;
background: url("barrow.gif") no-repeat
bottom;


Тут сделано много всего. Элемент ttlinkList получил ширину, перемещен наверх и придвинут к левой стороне контейнера # c o n t a i n e r . Оба абзаца внутри
раздела #quickSummary точно также придвинуты к правой стороне контейнера (можно было бы вместо этого позиционировать общего родителя обоих - элемент #quickSummary - и тем самым избавиться от одного лишнего правила).

Хитрости с карт - фотоинками


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

body {
margin: 0;
padding: 0;
background: #FFF url("bg_tree.gif") repeat-x
left top,- 'ШШЯЯШКШЯЯШШШШШ
color: #888;
text-align: center;


К имевшемуся ранее правилу body добавлены фоновая карт - фотоинка и цвет фона. Включив в объявление свойства background значение r e p e a t -x, мы тем самым
утверждаем, что карт - фотоинка должна повторяться только по горизонтали, а это нам и нужно.
К основному заголовку h i страницы присоединяется еще одна, на этот раз неповторяющаяся карт - фотоинка, расположенная поверх уже присоединенного к элементу
body фонового изображения. Напомним, что для каждого span внутри всех заголовков на странице задано свойство d i s p l a y : none, поэтому текст скрыт и уступает место графике, которую мы сейчас и добавим.
Но сначала надо задать для h i правильные размеры:

ttpageHeader hi {
height: 200px;
background: urlCnutitle.gif"
padding: 0;


Поскольку этой карт - фотоинке нужна длинная горизонтальная область, то элементу h i разрешено расширяться и заполнять весь контейнер (то есть элемент
# c o n t a i n e r , для которого ранее была задана ширина 732 рх); подкорректировать нужно только высоту h e i g h t . Обратите внимание, что верхний край центральной колонки тоже сместился вниз; поскольку h i появляется в разметке раньше, то заданная для него высота влияет на положение последующих элементов.
Боковые колонки при этом не затрагиваются, так как они позиционированы абсолютно и, значит, изъяты из нормального потока документа. Два этих мелких изменения радикально меняют внешний вид страницы.
Поскольку фон, ассоциированный с элементом body, фиксирован, а положение заголовка переменно, то нельзя заранее сказать, перекроет ли заголовок (например, фигурка с раскинутыми руками) деревья или небо. Наблюдать этот эффект можно, меняя размер окна браузера, - вы увидите, что положение фигурки относительно фона изменяется. Но при сохранении изображения, связанного с заголовком, верхняя поло-
вина была сделана прозрачной, поэтому оно прекрасно выглядит на фоне заднего плана. Каков бы ни был размер окна браузера, оба изображения сочетаются без
видимых «швов».

Форматирование


Поскольку в окончательном дизайне по-прежнему используется шрифт, подразумеваемый браузером по умолчанию, то нужно внести еще несколько мелких
дополнений, начав с центральной колонки:

#supportingtext p {
line-height: 1.5em;
#preamble p {
width: 350px;
tfooter {
background: D9D98B;
color: #fff;
padding: lOpx 20px;


border-top: lpx solid #363;
font: 85% Verdaba, Arial, Sans-serif;
text-align: center;
tfooter a:link, ttfooter a:visited {
padding: 0 5px;
font-weight: normal;


Первое правило уменьшает расстояние между строками (свойство l i n e - h e i g h t ) . Затем для блока

#preamble устанавливается ширина 350 рх, вероят но, для того чтобы слегка увеличить промежуток между этим блоком и правой колонкой.
Хвостовик требует чуть больше форматирования. Ранее для элемента # s u p p o r t i n g T e x t уже была задана зеленая нижняя граница, отображаемая прямо под
хвостовиком; теперь мы добавим к самому элементу # f o o t e r цвет фона background и верхнюю границу b o r d e r - t o p .

Завершающие штрихи

Но не забудьте, что необходимо что-то решить по поводу скрытых заголовков:

#supportingText h3 {
height: 70px;
#explanation h3 {
background-image: urlCwhat.gif");
background-repeat: no-repeat;
#linkList h3 {
height: 41px;
#lselect h3 {
background-image: url( "select.gif")


Мы не привели большую часть стилей для отдельных заголовков, ведь никаких сюрпризов там нет. Сначала задается согласованная высота h e i g h t для всех элементов h3 внутри первых двух разделов, а затем с каждым заголовком ассоциируется фоновая карт - фотоинка background-image, которая придает дизайну завершенный вид.








quicksummary 1 5





css

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



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



Поиск

***

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

20-ка посетителей: SinikarOr, halliehw16, LeonidMaf, Myxirdind, BriazSwert, harlesAmada, AAffibiafaina, matthewju3, Jamesvum, JamesFashy, kirknv2, loly777, ATobebyday, fluellusy, Peerbype, OpelpTara, Jaffartess, leighch11, Hallej, Atriarmdit


Партнеры

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

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

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

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