Навигация

Партнеры


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

CSS 28. Искусство веб дизайна

Исследование возможностей форматирования


Иногда для продвижения вперед приходится пользоваться воспоминаниями из прошлого.
Работая над хаотической «Жаждой крови», Дэйв Ши обратился к футуристическому ис-
кусству начала двадцатого века. Была поставлена цель соединить элементы прошлого с современной технологией.
Основу образного ряда составили фотографии из личного архива Ши. В сочетании с несколькими маскированными слоями получилась двухцветная репродукция, напоминающая шелковые трафареты, которые часто применялись для графического дизайна в прошлом.
В очень ограниченной цветовой палитре используются только черный, красный и белый цвета. Чтобы подчеркнуть резкость, он оставил на всех изображениях контуры, отказавшись от сглаживания неровностей. А воспользовавшись сглаживанием переходов (dithering) в формате GIF, он сумел тонко намекнуть на возможности современной технологии.

Задание настроя с помощью типографских эффектов

Беспорядочность, ощущаемая в «Жажде крови», специально подчеркнута организацией текста; абзацы позиционированы и отформатированы по-разному,
что создает впечатление хаоса. Применение различных гарнитур широко практиковалось дизайнерамифутуристами, при этом текст специально размещал-
ся так, чтобы создать максимальный зрительный дискомфорт.
Чтобы добиться чего-то необычного в «Жажде крови», понадобилось разместить абзацы так, чтобы они обтекали друг друга и заполняли страницу беспорядочным
образом. С точки зрения удобства чтения такая организация материала далека от идеала, но, возможно, вы заметили интересный эффект: межбуквенные интерва-
лы и плотности шрифтов различаются, из-за чего разные параграфы имеют разные оттенки. На рис. 2, где изображение слегка размыто, чтобы скрыть отдельные
литеры, влияние плотности шрифта отчетливо видно. В данной работе наибольший интерес представляет случайно меняющийся цвет шрифта. Изменяя межстрочные интервалы, поля и гарнитуру шрифта, можно добиться разного восприятия сообщения. Решив поиграть типографскими эффектами в собственном проекте, не упускайте из виду
эти соображения.
В большинстве случаев цель дизайна - последовательно выдержать один и тот же цвет во всем основном тексте. В CSS не так много средств, позволяющих решить
эту задачу. Но, хотя забывать о ней не следует, есть и более важные вещи - к примеру, четкость и длина строк.

Возможности форматирования


В «Жажде крови» широко используются различные средства форматирования текста, имеющиеся в CSS, помимо таких основных, как задание размера и гарнитуры шрифта.
В спецификации CSS, а равно в многочисленных книгах и руководствах по этой теме, вы найдете техническую информацию по каждому свойству, но ничего по поводу их применения в практическом дизайне.
Некоторые включенные в CSS свойства глубоко корнями уходят в основные принципы графического дизайна, но из технического руководства вы об этом никогда не узнаете.
Ниже будут описаны наиболее распространенные свойства, относящиеся к форматированию, их происхождение и возможные способы применения. Некоторые
свойства (к примеру, f o n t - f a m i l y , f o n t - s i z e , f o n t - s t y l e и font-weight) опущены, так как подробно рассматриваются в других разделах книги.

Применение стилей к тексту

Описываемые в этом разделе свойства позволяют задавать формат вплоть до уровня отдельного символа.
В большинстве случаев у шрифта должен быть предопределенный вариант, соответствующий выбранному стилю. Знакомство со списком шрифтов, установленных на вашей машине, может пролить свет на то, какие варианты есть у каждого шрифта.
СВОЙСТВО font-variant У этого свойства одно-единственное назначение - отобразить текст маленькими заглавными буквами. Высота первой буквы каждого слова остается обычной, а весь остальной текст печатается маленькими заглавными буквами.
Свойство может принимать одно из двух значений: normal и s m a l l - c a p s . У большинства шрифтов варианта с маленькими заглавными буквами нет, поэтому браузер просто уменьшает размер обычных заглавных букв. Поэтому сделанное выше замечание о предопределенных вариантах шрифта к свойству f o n t - v a r i a n t не относится:
Пример использования f o n t - v a r i a n t :
#quickSummary p {
font-variant: small-caps;
}
Как выглядит результат:
The Beauty of CSS Design
A DEMONSTRATION ОУ WHAT CAN BK ACCOMPLISHED
VISUALLY THROUGH CSS-BASEIJ DESIGN. SELECT ANY STYLE SHEET PROM THE LEST TO LOAD ГГ INTO THIS PAGE.
DOWNLOAD THE SAMPLE НТМЬ ШЕ AND CSSJOLE

Свойство text-transform
Как и f o n t - v a r i a n t , свойство t e x t - t r a n s f o rm позволяет более точно управлять преобразованием строчных букв в заглавные. Оно может принимать
следующие значения: c a p i t a l i z e , uppercase, l o w e r c a s e и none.
Значение c a p i t a l i z e преобразует в верхний регистр первую букву каждого слова, оставляя все прочие без изменения; значение u p p e r c a s e преобразует все буквы в верхний регистр, l o w e r c a s e переводит все буквы в нижний регистр, а попе не имеет видимого эффекта.
Пример использования t e x t - t r a n s f o r m :
#quickSuminary p {
text-transform: uppercase;
Как выглядит результат:
The Beauty of CSS Design
A DEMONSTRATION OF WHAT CAN BE
ACCOMPLISHED VISUALLY THROUGH CSSBASED
DESIGN. SELECT ANY STYLE SHEET
FROM THE LIST TO LOAD IT INTO THIS PAGE.
[b]

Свойство text-decoration[/b]

С самого момента зарождения Всемирной паутины гиперссылки подчеркивались, свойство же t e x t d e c o r a t i o n позволяет управлять подчеркиванием и другими эффектами не только для ссылок, но и для любого другого текста. Допустимые значения:
none, u n d e r l i n e , o v e r l i n e , l i n e - t h r o u g h и Ы i n k . Значение попе не имеет видимого эффекта, u n d e r l i n e добавляет линию снизу (подчеркивание), o v e r l i n e - линию сверху (надчеркивание),
l i n e - t h r o u g h - линию поперек текста (перечеркивание), a b l i n k вызывает мигание.
Наверное, t e x t - d e c o r a t i o n является самым противоречивым из всех свойств форматирования текста, поскольку может вызывать раздражение у читателя.
Чтобы избежать этого, придерживайтесь следующих рекомендаций:
• попе -подразумевается для большинства элементов; значение имеет смысл задавать явно, только если оно отлично от попе.
• u n d e r l i n e - применяйте только для гиперссылок. Если текст подчеркнут, но не является гиперссылкой, то пользователь будет введен в заблуждение. Сколько раз вы сами пытались щелкнуть по подчеркнутому тексту, не являющемуся ссылкой?
В типографии у подчеркивания другой, более традиционный смысл: так, например, выделяют названия книг, но наличие гиперссылок внесло свои коррективы;
• over l i n e - в математике надчеркивание применяется для обозначения средних величин, но больше оно почти никогда не используется;
• l i n e - t h r o u g h - применяйте перечеркивание
только для выделения текста, который потерял актуальность в контексте объемлющей страницы и вообще-то заслуживает изъятия, но по какой-то причине все же оставлен. В идеале любой вычеркнутый текст должен сопровождаться более новым;
хорошим примером применения могут служить системы учета исправлений и ведения версий;
4- b l i n k - если у вас нет абсолютной необходимости имитировать мигающий таймер видеомагнитофона, считайте, что значения b l i n k не существует.
На заре развития Web тегом чрезмерно злоупотребляли, а сегодня не каждый браузер поддерживает его эквивалент в CSS.
Пример использования t e x t - t r a n s form:
#quickSummary p {
text-decoration: line-through;
}

Как выглядит результат:
The Beauty of CSS Design
A demonstration of what can be accomplished vioually through CSS based dotrign. Select any stylo sheet from the list to load it into this page. Download the cample htralfilo and
Управление промежутками Выше мы видели, как контраст между литерами и
фоном влияет на восприятие текста. Промежутки - это мощный визуальный инструмент, а благодаря развитым возможностям форматирования в CSS, ими еще и легко управлять.

Свойство line-height

В прошлом типографы отделяли строки друг от друга полосками мягкого свинца (lead), отсюда и поныне существующий английский термин leading для обозначения межстрочного интервала, или интерлиньяжа.
CSS позволяет управлять величиной этого интервала с помощью свойства 1 i n e - h e i g h t . Допустимо задавать его значение в абсолютных и относительных единицах, указывая длину, процентное отношение или ключевое слово i n h e r i t .
Отметим, что для значения свойства l i n e - h e i g h t явно задавать единицу измерения необязательно. Значение 1 . 2 - это то же самое, что 1. 2ет или 120%;
если единица не задана, то считается, что к тексту применяется коэффициент масштабирования, а не абсолютный размер.

Пример использования l i n e - h e i g h t :
tquickSuminary p {
line-height: 0.8;

Как выглядит результат:
The Beauty of CSS Design
sheet from thelist to loaait into mis page.
Download the sample html file and css_fite
The Road to Enlightenment
Свойство letter-spacing

Межбуквенный интервал можно регулировать с помощью свойства letter-spacing. Оно может принимать значение normal или задаваться в виде длины промежутка, добавляемого к стандарт - фотоному расстоянию между буквами.
Из-за низкой разрешающей способности экрана изменять межбуквенный интервал в основном тексте можно только с довольно большой дискретностью, а
это выглядит по-любительски. Поэтому наиболее разумно применять свойство l e t t e r - s p a c i n g в заголовках и небольших фрагментах текста.
Пример использования l e t t e r - s p a c i n g :
#quickSummary p {
letter-spacing: O.lem;

Как выглядит результат:
The Beauty of CSS Design
A demonstration of what can be
accomplished visually through CSS-based
design. Select any style sheet from the list
to load it into this page.
Download the sample htmlffle. and cssjfile.


Свойство word-spacing


Как и l e t t e r - s p a c i n g , свойство word-spacing позволяет регулировать промежуток, только не между буквами, а между словами. Допустимые значения:
normal, длина, процент или ключевое слово i n h e r i t .
На применение свойства word-spacing браузером влияют и другие факторы, в том числе выравнивание (задаваемое свойством t e x t - a l i g n ) и свойство w h i t e - s p a c e .
Пример использования word-spacing:
#quickSummary p {
word-spacing: lem;

Как выглядит результат:
The Beauty of CSS Design
A demonstration of what can be
accomplished visually through CSS-based
design. Select any style sheet from the
list to load it into this page.


Свойство text-align

Это свойство позволяет отцентрировать или произвести выключку текста, а также выровнять его по правому или левому краю объемлющего элемента. Допустимые значения: l e f t , r i g h t , c e n t e r и j u s t i f y .
Поскольку браузер выполняет выключку автоматически, то традиционные приемы предотвращения неприглядных пустот - к примеру, перенос слов - неприменимы. Выключка с помощью CSS часто приводит к ситуации, изображенной на рис. 4. Из-за отсутствия точного контроля мы рекомендуем ограничиться выравниванием по левому или правому краю. Центрирование может найти применение в заголовках и небольших фрагментах текста, например цитатах, но лучше не прибегать к нему для форматирования текста, длина которого превышает пару строк.

Пример использования t e x t - a l i g n :
#quickSummary p {
text-align: right;


Как выглядит результат:
The Beauty of CSS Design
A demonstration of what can be accomplished
visually through CSS-based design. Select any style
sheet from the list to load it into this page.
Download the sample html file and css_ji]e.


Соблюдайте меру


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




r i f o a v u t e






css


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



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



Поиск

***

Онлайн
Всего на сайте: 23
Гостей: 7
Пользователи: Lantana
Роботы: Yahoo Bot, Google Bot, MSN Bot, Yandex Bot, Yandex Bot, Yandex Bot, crawl Bot, Yandex Bot, Yandex Bot, Yandex Bot, Yandex Bot, Yandex Bot, Yandex Bot, Google Bot, Yandex Bot

20-ка посетителей: briannani2, MatthewZX, Lantana, Patriotvhg, Amigoalet, Mirzoel, AgnesAccony, andrewiv2, kerricu2, ptencikcxz, thelmaci11, ptencikzia, carmelatm11, CecilSwors, msvuser, XBPatrickTob, ShotbMum, Koaress, Egormulky, JamesFreet


Партнеры

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

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

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

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