Навигация

Партнеры


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

CSS. Часть 19.

Схема Рандла


Дизайнер Майк Рандл (Mike Rundle) предложил решение, в котором для выталкивания текста за левую границу окна используется отрицательное значение свойства t e x t - i n d e n t . Решение простое и элегантное, хотя в некоторые случаях неприменимое, так как Internet Explorer для Windows 5.0 вместе с текстом выталкивает и фоновое изображение.

Разметка


<h3 id="header">Apple pie with Cheddar?!</h3>
Таблица стилей
•header {
text-indent: -5000px;
background: url(sample-image.gif) no-repeat;
height: 2 5px;
}

Аргументы за: доступна программам чтения с экрана; нет лишних span. Красивая и несложная таблица стилей.
Против: не решает проблему отключения графики при включенном CSS. Не всегда правильно работает в Internet Explorer 5.0 для Windows. Поддерживается браузерами: Windows - Internet Explorer 5.5-H, Netscape 7, Opera 6+, Firefox. Macintosh - Internet Explorer 5.2, Safari, Firefox.

Схема Левина


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

Разметка


<h3 id="replace" id="myhl">And a dash of
Thyme. <spanx/spcinx/hl>


Таблица стилей

.replace {
position: relative;
margin: Opx; padding: Opx;
/* скрыть overflow:hidden от IE/Mac \*/
overflow:hidden;
/* */
.replace span {
display: block;
position: absolute;
top: Opx;
left: Opx;
z-index: 1; /* для Opera 5 и 6 */
}
#myhl, #myhl span {
height: 25px;
width: ЗООрх;
background-image: url(thyme.png);


Аргументы за: доступна программам чтения с экрана; нет лишних span. Решает проблему отключения графики при включенном CSS. Против: Следует избегать прозрачных изображений. Громоздкая таблица стилей. Поддерживается браузерами: Windows - Internet Explorer 5+, Netscape 7, Opera 6+, Firefox. Macintosh - Internet Explorer 5.2, Safari, Firefox.

Альтернативные варианты


Так какой метод использовать? Выбор за вами. В ожидании того дня, когда большинство браузеров начнут поддерживать автоматически сгенерированный кон-
тент, методы Леа-Ленгбриджа, Рундла и Левина - это лучшее, на что можно рассчитывать. Существующие варианты дизайна сайта Zen Garden, в том числе и «Ре-
волюция» Хелльсинга были бы невозможны без того прогресса, к которому привела оригинальная схема FIR; в будущих вариантах, наверное, станут применяться альтернативные схемы, обеспечивающие большую доступность.

Арт Деко


Минимум графики, максимум воздействия Приступая к работе над новым дизайном,
Марк Трудель следует некоему ритуалу. Сначала он заходит на сайты, которые вдохновляют его, примерно час рассматривает чужие работы и подбирает контент: фотографии, иллюстрации, текст. Затем открывает Adobe Photoshop, где готовит мини-
картинки (thumbnails). В отличие от многих художников-графиков, он не любит бумажных эскизов, считая, что им не хватает уровня детализации, достижимого в Photoshop.
В начале зимы 2004 года Трудель нарушил этот ритуал, поскольку в то время гулял по улицам Майами. Решив, что здания в районе Саут Бич, выстроенные в стиле Арт Деко, - прекрасная модель для абстрактной фотографии крупным планом, Трудель сделал множество снимков, один из которых лег в основу чистых и свежих линий работы.
Новый образ мышления
Когда дело доходит до работы с графикой в контексте CSS, от дизайнеров «старой школы», привыкших составлять веб-страницу из кусочков, требуется научиться думать по-новому. Для читателей, никогда, по счастью, не сталкивавшихся с методом «мозаики», поясним, что в этом случае дизайнер готовит макет в Photoshop,
затем разрезает картинки на кусочки и помещает их в HTML-таблицы, которые образуют на странице сетку.
Такой подход естественно преобладал в веб-дизайне на протяжении большей части 1990-х годов. Увы, эта практика не отмерла и сегодня, что тормозит прогресс и наносит ущерб доступности и функциональности. Один из редко обсуждаемых недостатков метода мозаики - это его ограниченные возможности, в особенности относительно графики. Нужно, чтобы каждый кусочек изображения точно укладывался в ячейку сет-
ки, представляющей собой набор прямоугольников.
Мягко говоря, это мешает дизайнеру в полной мере раскрыть свой творческий потенциал. Поэтому у многих и многих дизайнеров вошло в привычку создавать
излишне геометричные макеты. Применение CSS в качестве инструмента верстки снимает многие подобные ограничения. Конечно, и в CSS все основано на модели прямоугольных областей, от этого никуда не уйти, но есть и различия. Работая с таб-
лицами стилей, вы можете мыслить в терминах сетки, а можете и забыть о ней. Проявив изобретательность, дизайнер может вырваться за пределы сетки и предложить более текучий, открытый дизайн.
Не будучи связан таблицами, дизайнер может подойти к холсту, не думая заранее об ограничениях. И благодаря этому изображения теперь используются совсем
иначе, чем раньше, что дает прекрасные результаты. Жесткие сетки, так затруднявшие работу дизайнера, остались в прошлом. CSS позволяет прикрепить изображение к любому элементу в качестве фона, что, в свою очередь, дает возможность организовывать слои, перекрытие и - при наличии хорошего браузера - даже
пользоваться прозрачностью формата PNG для создания целого ряда визуальных эффектов.
Технология CSS не только позволила дизайнеру раскрыть свой творческий потенциал, но и предложила способы уменьшения веса страниц, к вящему удовольствию пользователей.

Разумные подходы к работе с графикой


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

Размер и вес изображения


Карт - фотоинки должны весить как можно меньше, но не в ущерб зрительной целостности. Метод разрезания, применявшийся в эпоху табличной верстки, способствовал, в частности, сокращению общего веса страницы.
Однако таблицы стилей позволяют разместить понравившееся вам изображение точно в нужном месте. В некоторых случаях мы берем более крупную карт - фотоинку, в других - размером поменьше, а иногда выстилаем большую область совсем крохотными
изображениями.
Взгляните на основную фотографию, образующую фон «Арт Деко». На ней изображены облака и характерные формы здания. Именно эта часть дизайна создает впечатление легкости и воздушности, но, рассмотрев фоновую карт - фотоинку в деталях, мы будем
немало удивлены размерами.
Размер изображения составляет 788x497 пикселей. Представители старой школы разрезали бы его на несколько частей (если дизайнеру вообще пришла бы в
голову мысль так оформить страницу).
Все изображение весит 45,02 Кб; в табличной верстке считается, что это слишком много. Но напомним, что CSS предлагает другие подходы к использованию гра-
фики, поэтому такой вес основного фона не покажется чрезмерным, если прочих картинок мало и размер их невелик. Следующим по «массивности» идет изображе-
ние с заголовком, которое весит всего 3,28 Кб и имеет более привычный размер 266x103 пикселя.

Число изображений


В дизайне на основе CSS число изображений не обязательно должно быть меньше, чем в традиционном табличном макете, но и с меньшим количеством вы можете достичь более впечатляющих результатов.
Так как же уменьшить число используемых изображений и сократить тем самым вес страницы? Одна из целей данной главы - побудить вас мыслить о графике более широко, и ответ на этот вопрос будет неплохим началом. Есть несколько способов сократить потребность в графике, а именно:
+ всюду, где возможно, пользоваться стилизованным текстом вместо картинок. В «Арт Деко» так делается в заголовке и подзаголовке страницы. Для получения типографских эффектов действительно применена графика, но непосредственно под ней расположен обычный текст (из раздела quickSummary).
Соблюдение такого рода баланса может оказаться очень полезным;
• брать только ту часть картинки, которая необходима для достижения желаемого эффекта. Нагляднее всего это проявляется в использовании основной
фоновой фотографии и заголовков, которые и придают всей странице зрительное очарование;
• пользоваться очень тонкими изображениями для заполнения фона. Фон части документа, расположенной под основной фотографией, залит карт - фотоинкой bg_bluel .gif, высота которой всего 1 пиксель, а весит она жалкие 140 байтов;
• по возможности используйте изображения повторно. В умело построенной таблице стилей одно и то же изображение можно связать со многими элементами. В «Арт Деко» карт - фотоинка l i g h t b l u e . g i f служит фоном для трех разных элементов, но при этом
задано только одно правило, которое с помощью селектора потомков применяется ко всем элементам u l внутри раздела l i n k L i s t :

#linkList ul {
margin: Opx;
padding: Opx;
background-image: url(lightblue.gif);
background-repeat: repeat-y;


• не забывайте об обычной заливке цветом. Если нужного эффекта можно добиться с помощью свойства c o l o r или b a c k g r o u n d - c o l o r , не пользуйтесь изображениями.
И наконец, если карт - фотоинка лишняя, выбросьте ее. У дизайнера всегда возникает сильное искушение вставить избыточную графику. Спросите себя, каждая ли карт - фотоинка на странице имеет какое-то назначение, эстетическое или функциональное. Если ответ неясен, подумайте, не стоит ли от этой картинки избавиться.

Слои графики


Еще один вопрос, которым редко задавались до реализации поддержки CSS в браузерах, - это организация нескольких слоев графики для создания тех или
иных эффектов. Сегодня это вошло в плоть и кровь дизайнеров, но раньше размещение одного изображения поверх другого практиковалось редко.
Встречался такой метод разве что при использовании прозрачного GIF поверх фона или цвета, указанного для body или t a b l e . В этом случае в теге body зада-
валось фоновое изображение или цвет для всей страницы, например:

<body bgcolor="#3366СС " background3"image/
bg.jpg">


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

<tdximg src=" images/ess zengarden.gif"
width="266" heigh="103"
alt="CSS Zen Garden"x/td>


В результате получалось что-то похожее на фрагмент рассматриваемого дизайна, изображенны.
В «Арт Деко» Трудель использовал основную фотографию как фон для элемента
# c o n t a i n e r :
(•container {
background: url(bg.jpg) no-repeat scroll
jHp: left top;


Затем он связал прозрачную карт - фотоинку с селектором
ttpageHeader hi:
ftpageHeader hi {
!
background: url(csszengarden.gif) no-repeat
left top;
width: 62 0px;
height: 103px;


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

Максимальное воздействие


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






3366

Css34
3366

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



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



Поиск

***

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

20-ка посетителей: andymw11, nicholeaj16, Jamesvum, JeremyTar, phylliszy16, idr.whitei, laurijz18, Vzornok, Eugenewhal, kayetp16, gakxtuhuch, eskorthulya, BenDeta, margueritern2, Hallej, Norriswex, Randallnila, ASeessyzest, fernandovw2, ritaca1


Партнеры

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

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

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

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