Навигация

Партнеры


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

CSS Дизайн. Часть 20.

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


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

Проблема прямоугольников


Совсем неслучайно дизайн для Web исторически сложился «прямоугольным». И какая ирония заключена в том, что именно дизайн на основе CSS особенно часто обвиняли в этом грехе! Притом именно табличные макеты, для которых характерно активное применение границ и отступов, часто выглядели как нагромождение прямоугольников, бессистемно разбросанных по поверхности страницы. Еще вспомните, что в те времена большинство персональных компьютеров оснащались мониторами с разрешением 640x480 пикселей — совсем немного по сравнению с тем, что мы имеем сейчас. Добавьте к этому основанный на прямоугольниках интерфейс самого веб-браузера и форму компьютерного экрана. Вот и получится прямоугольник внутри прямоугольника
внутри прямоугольника.
С визуальной точки зрения посетителю было не очень удобно разбираться в информации, глубоко упрятанной в скоплении прямоугольных областей. Но то была эпоха головокружения - Всемирная паутина только появилась, и очарование ее было столь велико, что и создатели страниц, и зрители готовы были простить многое.
Разумеется, когда для создания визуального представления стали применять технологию CSS, прежде всего попытались на новой основе воссоздать старые, уже привычные типы верстки. В ранних макетах преобладала структура с несколькими колонками, к которой легко было применять декоративные элементы вроде границ.
Именно поэтому на ранние работы обрушился град критики за изобилие прямоугольных форм.
Неправильно было бы сказать, что CSS несет основную долю ответственности за «проблему прямоугольников». По мере того как наше понимание CSS становится более зрелым, применяются все новые и новые способы работы с графикой, особенно с фоновыми изображениями для элементов, для создания многослойных форм, орнаментов и других украшений, позволяющих выйти за границы прямоугольных макетов прошлых лет.
В дизайне «Без границ» применяются скругленные углы и круговые элементы декора, позволяющие убрать угловатость, присущую прямоугольной верстке, и смягчить общее впечатление от страницы.

Да здравствуют изгибы!


В работе «Без границ» есть много примеров того, как можно добавить изгибы и скруглить формы, чтобы они не казались слишком прямоугольными. Для этого так или иначе используются фоновые изображения.

Простые изгибы: одно фоновое изображение


Самый очевидный способ нарушить «прямизну» - создать единственную карт - фотоинку, содержащую все кривые и контент. Затем она связывается с некоторым элементом посредством таблицы стилей.
«Без границ» демонстрирует применение такого метода. У заголовка The Road to Enlightenment приятно скругленный правый край.
Затем это изображение было присоединено к элементу h3 в разделе #preamble:

#preamble h3 {
background: transparent rl(enlightenment.gif)
width: 2 91px;
height: 37px;
margin-bottom: lOpx;


Но что делать, если вы хотите наложить такую непрямоугольную карт - фотоинку на другой фон?

Составное фоновое изображение


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

Чтобы достичь такого эффекта, Мокржицки сначала поместил на страницу карт - фотоинку с полосками в качестве фонового изображения, присоединенного к элементу body:

Verdana, Arial,
body {
font: small "Trebuchet MS
Helvetica, sans-serif;
color: #676767;
margin: Opx;
padding: Opx;
round: #fbfbf2 urllpage_back.gif)
background: transparent url(body_back.png)
no-repeat top left;
}


Затем к элементу # c o n t a i n e r он присоединил изображение со скругленным углом:

((container {
padding: Opx;
margin: Opx;
round: transparent url(body_back.png)


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

Оформление углов области контента


Основываясь на идее слоев, можно скруглить несколько углов у области контента или добиться других эффектов. Но фокус в том, что для этой цели потребуется несколько элементов в HTML-разметке.
Примером могут служить разделы #pageHeader и #quickSummary в дизайне «Без границ». В результате текст оказывается внутри области со скругленными нижним и верхним углом.
Без применения CSS понадобилось бы одно или несколько изображений, упакованных в таблицу. CSS же позволяет создать только изображения для получения эффекта скругления и применить стили к HTML-тексту, уменьшив тем самым общий размер картинок.
Для этого Мокржицки создал два изображения: одно для верхней части и другое - для нижней.
Затем они были присоединены в качестве фона к элементам h2 в разделах ttpageHeader и ttquickSummary соответственно:

#pageHeader {
position: absolute;
left: Opx;
top: 190px;
width: 291px;
height: 159px;
z-index: 3;
}
tpageHeader h2 {
position: absolute;
no-repeat bottom
width: 291px;
height: 135px;
margin: 0;
padding: 0;
}


Но с элементами ttpageHeader hi и ttquickSummary не связано никаких изображений. Вместо этого они позиционированы, для элемента h i задан цвет фона, а текст в HTML-разметке стилизован:

#pageHeader hi {
position::absolute;
top: 59px;
background-color: #bbbf58;
border-right: 2px solid #fff;
width: 289px;
height: 150px;
margin: 0;
padding: 0;


#quickSummary {
olute;
top: 27Opx,•
left: 20px;
width: 245px;
line-height: 2;
z-index: 3;
#quickSummary p {
color: #fff;
font-size: llpx;
line-height: 1.5;
font-family: Verdana, Arial, Helvetica, sansserif;
}


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

Нестандарт - фотоные маркеры


Этот прием также подразумевает присоединение фонового изображение к элементу, в данном случае к элементу l i . Круглые графические маркеры хорошо укладываются в основную тему дизайна «Без границ» и дают пищу для размышлений тем дизайнерам, которым интересно, как создается графическое оформление, интегрированное с общей концепцией.
Для создания полного набора маркеров для своей работы Мокржицки сначала подготовил три разных изображения. Первое - светло-зеленое - нужно было
для выделения основных ссылок; второе - голубое - для ссылок на архивы; третье - красновато-коричневое - для ссылок на ресурсы.
Затем изображения маркеров были присоединены в качестве фона к конкретным элементам:

«lselect l i {
transparent ur1(1ink_dot. gi f)
7px no-repeat; °
ftlarchives l i {
background: transparent u r l d i n k _ d o t 2 . g i f ) 0
7px"no-repeat;
}
#lresources li {
background: trar
7px no-repeat;


Разноцветные маркеры немного оживляют дизайн и дают понять посетителю, что семантически эти разделы различны.

Скругленные изображения


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







png


Добавить статью в:
0
Дата: 30-10-2010, 01:21, Добавил: singarella, Раздел: ---



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



Поиск

***

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

20-ка посетителей: gwendolynip18, luzhw2, lishilin_mBep, ynyxjmergz, Georgepaync, AgnesAccony, hattieiw4, bobbyny11, 1992.pyotr10Bep, gingerdt3, GorGor, androsov.20.5Bep, ArthurDet, ArthurTuh, chapchidze.denBep, perryvd1, Jamessah, brianfe4, beatricemw18, vadim.11.iqBep


Партнеры

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

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

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

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