Навигация

Партнеры

ArtGrafica - АртГрафика - скачай счастье :) » Статьи по дизайну » WEB дизайн » CSS 32. Устами дизайнера глаголит истина.

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

CSS 32. Устами дизайнера глаголит истина.


Небо над бонсай

Преодоление ограничений браузеров с помощью изобретательного подбора графики и кода


Поднимая тему озарения на новую высоту, Майк Дэвидсон создал обитель зен-буддиз-
ма на небесах. Взяв за основу фотографию утеса, поросшего деревцами, он для начала
прикинул, как добиться баланса текста с доминирующим изображением.
Поместив изображение утеса в правый верхний угол и осветлив его, Дэвидсон располо-
жил текст слева и тем самым избежал проблем контрастностью, которые могли бы
возникнуть, если бы текст шел поверх картинки. Черный текст с широкими пропусками занимает пустое белое пространство слева от утеса, и взгляд зрителя плавно скользит
вниз, где его ожидает сюрприз: стилизованные логотипы основных браузеров, выгравированные на поверхности утеса, и скалолаз, заглядывающий в пропасть. Скалолаз - это сам Дэвидсон. Успешно одолев подъем к вершинам CSS, он понимает, что пути назад нет.

Управление версиями

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

#extraDiv2 {
background-image: url(edge_boCtom_black.gif);
background-repeat: repeat-x;
position: fixed;
bottom: 0;
left: 100%;
width: 100%;
height: 20px;
margin-left: -100%;


Атрибут позиционирования f i x e d позволяет точно расположить элемент на странице, так что он будет оставаться на месте даже при ее прокрутке. Создается
впечатление, что такие элементы всплывают поверх остальной части страницы, именно так ведет себя рамка в рассматриваемом дизайне. Однако фиксированное позиционирование нельзя считать надежной техникой, поскольку некоторые
браузеры (и, прежде всего, Internet Explorer для Windows) прокручивают фиксированные элементы вместе с остальной страницей. Иногда такое ухудшение замысла можно считать приемлемым: если браузер оставляет элементы с атрибутом f i x e d на месте - прекрасно, если нет - пусть прокручиваются, потерпим.

Обходной маневр для позиционирования черной рамки

Но в случае «Неба над бонсай» рамка наползла бы на контент, если бы фиксированные элементы прокручивались, поэтому необходимо было найти
какой-то выход из этого положения. Существуют различные фильтры, позволяющие скрыть часть таблицы стилей от некоторых браузеров, но вместо того,
чтобы полностью убирать рамку, Дэвидсон придумал, как убрать ее за пределы экрана, воспользовавшись совсем другим дефектом браузеров.
Каждая из двух горизонтальных частей рамки - верхняя и нижняя - позиционируется с атрибутом f i x e d и смещением влево 100%. Поэтому начальные позиции расположены как раз за правой границей окна браузера, то есть не видны. Чтобы они все-таки по-
явились на экране, Дэвидсон задал для каждой части рамки значение левого поля

m a r g i n - l e f t -100%. #extraDiv2 {
background-image: url(edge_bottom_black.gif);
background-repeat: repeat-x;
position: fixed;
bottom: 0;
left: 100%;
width: 100%;
height: 2 0px;
margin-left: -100%;
}


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

Будда


Решив вопрос с размещением рамки, Дэвидсон добавил еще один визуальный эффект, чтобы усилить звучание основной темы. На выступающем камне, рядом
с правым краем окна браузера находится золотая статуэтка сидящего Будды. Это изображение было позиционировано с атрибутом f i x e d с применением той
же техники, что и для рамки.
Поскольку Internet Explorer в любом случае не смог бы правильно показать статуэтку, Дэвидсон решил воспользоваться альфа-прозрачностью, предусмотренной форматом PNG, которая в Internet Explorer также не поддержана.
За уступом в PNG-файле была помещена слабая прозрачная тень. Когда пользователь прокручивает «Небо над бонсай», тень не дает уступу затеряться среди камней на заднем фоне, так что создается впечатление трехмерности.
Этот простой, но тонкий штришок невозможно было бы воспроизвести с применением ограниченной прозрачности GIF-файла, и, следовательно, он не виден в браузерах, не умеющих правильно обрабатывать прозрачность в формате PNG.
Хотя парящий уступ и изображение статуэтки усиливают зрительное впечатление от «Неба над бонсай», но Дэвидсон так глубоко прочувствовал тему озарения, что захотел, чтобы лишь истинно «просветленные» браузеры с полной поддержкой CSS могли ее правильно показать. Воспользовавшись тем же трюком с отрицательными полями, что и для рамки, Дэвидсон просто скрыл весь парящий уступ от Internet
Explorer для Windows.
Однако понимая, что многие посетители, работающие именно с этим браузером, не смогут наблюдать эффект, он сделал так, что остальная часть дизайна выглядит пристойно даже без уступа. В данном случае некоторая деградация приемлема, хотя трудно отрицать, что работа смотрится гораздо лучше в браузерах, поддерживающих фиксированное позиционирование и PNG-прозрачность.

Прозрачность бокового блока

Разместив текст и фотографию утеса, Дэвидсон столкнулся с проблемой: нужно было как-то расположить списки ссылок: select a design, archives и resources. Потратив много времени на шлифовку изображения утеса, он не хотел чем-то закрывать его.
Перекрытие с небольшим уровнем прозрачности казалось хорошим решением, но PNG-прозрачность здесь не годилась: на этот раз было важно, чтобы и
пользователи Internet Explorer для Windows могли видеть всю карт - фотоинку. Поэтому он обратился к старому трюку, который веб-дизайнеры давно применяли для
создания иллюзии полупрозрачности с помощью небольшого прозрачного GIF-файла.
Узор, состоящий из чередующихся черных и прозрачных пикселей, видится как полупрозрачная черная область, наложенная на большую область. Это напоминает технику создания полутоновых изображений струйными принтерами: они наносят решетку из крохотных черных точек, заставляя глаз поверить, будто он видит серую карт - фотоинку.
Поскольку пиксели больше точек, наносимых струйными принтерами даже с самой низкой разрешающей способностью, то при пристальном взгляде структура
узора становится видна, так что иллюзия несовершенна. Но она все же достаточно хороша, поэтому этот узор можно считать частью дизайна. Чтобы увязать его с остальной частью страницы, Дэвидсон еще подчеркнул заголовки в основном тексте пунктирными линиями. Это тонкий ход, призванный придать всей работе стилистическое единство, пусть даже она выглядит не совсем так, как задумано.

Специальные приемы

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

Судите сами

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






png


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



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



Поиск

***

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

20-ка посетителей: Asteroigck, rebauw4, ahgawhvc60, aliciapa16, adelineve60, Jamesvum, wordpress, JaqmesOmido, nancypw11, EnzoZogy, JamesNiz, amandajc11, Grubuztus, Andrewbok, yvettemt2, kariqi69, fluellusy, OnatasOr, AgnesAccony, Irmakson


Партнеры

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

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

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

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