Навигация

Партнеры


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

CSS 39. Дизайнерские примочки


Корпорация ZenWorks От конкуренции к согласию


Впервые открыв для себя сайт CSS Zen Garden, Дерек Хансен был поражен глубиной
идеи и усилиями, затраченными на создание многих представленных работ. Поскольку
он в тот момент переходил к дизайну на основе стандарт - фотоов, то предпосылки к представлению собственного варианта дизайна уже существовали.
Хансену хотелось сделать что-то уникальное. Он тщательно исследовал все уже имеющиеся варианты. Больше всего ему понравились работы с четко выраженной темой, и он решил, что нужно создать нечто, содержащее в себе целый рассказ, но при этом отличное от всех прочих вариантов дизайна, представленных на сайте. В результате получилась «Корпорация ZenWorks».

Возьмем фирменный бланк


Как во всяком хорошо написанном документе, в «Корпорации ZenWorks» уделено много внимания удобной организации и простому представлению контента
(рис. 1). Серебристый фон и простые шрифты задают общий тон:

body {
background: #999 url(bk.jpg) repeat-x fixed;
margin: 0;
padding: 0;
color: #33140E;
font-family: Georgia, Times, serif;
font-size: 80%;
}
hlrh2,h3,h4,h5,h6 {
border: 0;
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans
Unicode", Verdana,
sans-serif;
font-weight: normal;
h3 {
text-transform: uppercase;
font-size: 90%;
word-spacing: 2px;
letter-spacing: 2px;
margin-left: -lOpx;
font-weight: bold;


Обратите внимание на отрицательные поля у элементов h3. Сейчас это выглядит немного странно, но, когда мы доберемся до конца, станет ясно, что
это придает странице дополнительное очарование.

Бумагу, пожалуйста


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

((container {
width: 750px;
background: url(paper_mid.gif) repeat-y;
margin: 50px 0 0 25px;
padding-bottom: 20px;


В результате для контейнера задается фиксированная ширина 750 пикселей и добавляется основной графический образ листа бумаги, который повторяется
вдоль вертикальной оси. Кроме того, для элемента ttcontainer устанавливаются поля и отступ вдоль нижнего края, чтобы оставить немного пустого места. Хотя из-за полей элементы h3 немного сдвинулись, они все еще находятся не там, где нужно, но
вскоре мы это исправим.

Фирменный логотип


Поскольку в основу дизайна положен образ фирменного бланка, необходимо добавить фирменный логотип и соответствующие картинки. Вот как логотип присоединяется к элементу h i :

tpageHeader {
h e i g h t : ЮОрх;
padding: 20px 0 20px 50px;
}
#pageHeader hi {
height: 90px;
width: 340px;
background: urKzen_logo.gif) no-repeat;
}


Следующее правило скрывает текст логотипа, оставляя карт - фотоинку:

#
pageHeader h2 span, tpageHeader hi span {
display: none;
}
Теперь самое время установить поля для заголовков и
текста:
tlinkList, #supportingText, #preamble {
margin: lOpx ЮОрх lOpx 200px;
}


Логотип оказался там, где и ему и полагается быть, в левом верхнем углу листа. Помимо логотипа, на странице присутствует еще и цитата, не без юмора
подписанная инициалами C.S.S. Достигается это путем применения к элементу ttquickSummary правила, которое позиционирует цитату, скрывает находящийся под ней текст и стилизует текст внутри раздела:

ttquickSummary {
position: absolute;
top: 50px;
left: 450px;
background: url(subtext.gif) no-repeat;
height: ЮОрх;
width: 280px;
#quickSununary p.pl {
display: none;
}
ttquickSummary p.p2 {
padding: 78px 0 0 15px;
font-size: lOpx;
font-family: «Lucida Grande», «Lucida Sans
Unicode», Arial,
sans-serif;
}


Сочетание графики и стилизованного текста создает впечатление традиционного фирменного бланка.
Но верхний край бумаги, пожалуй, излишне ровный.
С помощью дополнительных div, присутствующих в XHTML-разметке, Хансен добавил фоновое изображение, исправляющее этот недостаток:

#extraDivl {
position: absolute;
top: 20px;
left: 23px;
width: 750px;
height: 50px;
background: url(paper_top.gif) no-repeat;
}


Заметьте, что за счет абсолютного позиционирования удалось точно совместить верхний край листа бумаги с остальным содержимым страницы. Чтобы покончить с приданием корпоративного облика странице, применим к элементу # f o o t e r стиль, который позиционирует его в верхней части, сразу под логотипом:

#footer {
position: absolute;
top: 160px;
left: 150px;
font-size: 80%;
border-top: lpx solid #6E512F;
padding-top: 3px;
width: 575px;
text-transform: uppercase;
text-decoration: none;
font-family: «Lucida Grande», «Lucida Sans
Unicode», Arial,
sans-serif;


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

Размещение ссылок


Хансен решил, что у каждого набора ссылок должен быть свой визуальный облик. Поля для элемента #linkList уже установлены, а стили для раздела Select a Design
вы найдете в оригинальном CSS-файле - поищите там селекторы #lselect и #larchives. В результате получается симпатичный список ссылок и область навигации
по архивам, расположенная внизу страницы.

Немного индивидуальности

Кто сказал, что корпоративная тема должна быть подобна пиджаку, застегнутому на все пуговицы? Хансен добавил ряд неформальных черточек. Во-первых,
с листом бумаги скреплена записка, для этой цели задействован селектор ttpageHeader h2:

ttpageHeader h2 {
background: u r K p a p e r _ c l i p . g i f ) n o - r e p e a t;
width: 320px;
height: 262px;
position: absolute;
top: 2 50px;
left: -6px;
z-index: 5;
)


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

#lresources {
position: absolute;
top: бООрх;
left: Юрх;
width: 200px;
height: 257px;
background: url(sticky.gif) no-repeat;
font-family: «Lucida Grande», «Lucida Sans
Unicode», Arial,
sans-serif;
color: #000;


Теперь в левой части страницы есть два абсолютно позиционированных элемента, придающих ей более реалистичный вид. Последний визуальный элемент - для полноты карт - фотоины - это ручка. Чтобы поместить ее в нужное место, Хансен воспользовался
селектором #extraDiv2 и, конечно же, абсолютным позиционированием.

#extraDiv2 {
position: absolute;
top: 900px;
left: 700px;
background: url(pen.gif) no-repeat;
width: 140px;
height: 547px;


Можно отсылать

Для создания уникального, ни на что не похожего дизайна работа «Корпорация Zen Works» опирается на четко определенную тему. Несмотря на некоторые сложности - к примеру, ограничения в использовании шрифтов и невозможность с помощью прозрачного GIF создать такие же эффекты, как с помощью альфаканала в формате PNG, - Дереку Хансену удалось создать элегантный и запоминающийся образ.








css


css


css

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



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



Поиск

***

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

20-ка посетителей: janaoq2, latishama11, EvgeniySpimi, corinajt2, Jamesvum, DavidKek, reneoi60, AgnesAccony, yvonnens1, vincentdr1, VincentBen, Ernestloro, wordpress, janiswp16, Aisosmelm, steklodelyjj, msvuser, Ahipdratiavip, Koaress, AMeelidenia


Партнеры

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

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

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

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