Навигация

Партнеры


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

Css дизайн. Часть 10

Цвета в CSS


К счастью, в CSS для работы с цветами есть много средств. К вашим услугам:
• имена цветов. В CSS определено 17 поименованных значений: black (черный), silver (серебристый), gray (серый), white (белый), purple (пурпурный), fuchsia (фуксия), green (зеленый), lime (лайм), olive (оливковый), yellow (желтый), navy (темно-синий),
blue (синий), teal (бирюзовый), aqua (аквамарин) и orange (оранжевый). Пример:
color: orange;
• RGB-значения (числовые). Можно использовать числовые значения для красной, зеленой и синей составляющих цвета, как в примере ниже - для светло-голубого. Узнать их можно в Photoshop (рис. 3) или любом другом графическом редакторе: color: rgb(51,153,204);
• RGB-значения (процентные). Можно задать процентные доли красного, зеленого и синего. В примере ниже получится фиолетовый цвет: color: rgb(93%, 51%, 93%);
• шестнадцатеричные значения. Это шестизначное число в шестнадцатеричной системе счисления, которое можно получить с помощью Photoshop (рис. 4)
или одной из множества других программ. Каждая пара символов в нем соответствует одной компоненте RGB. Такая запись применяется в Web уже очень давно, так что многие читатели с ней знакомы: color: #0OO0FF;
• сокращенные шестнадцатеричные значения. Такую нотацию можно применять лишь тогда, когда каждая пара состоит из двух одинаковых символов.
Например, #FF6699 можно сократить, а #808080 - нельзя. Синий цвет из примера выше удовлетворяет указанному требованию, так что его шестнадцатеричное значение можно сокращенно записать в виде: color: #00F;
• системные цвета. Это набор ключевых слов, определенных в CSS 2.1, которые позволяют пользоваться системными цветами, установленными на компьютере посетителя. Например: color: WindowText;

Красочные выводы


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

В зеленых тонах


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

Орнамент

Графика дизайна «В зеленых тонах» состоит в основном из повторяющихся орнаментов, которые используются повсюду. Есть два основных вида: один состоит из полутоновых точек, в другом прослеживаются цветочные мотивы (рис. 1 и 2). Орнаменты созданы
путем сочетания элементов из галереи с фильтрами, имеющимися в Adobe Photoshop. Для большей зрелищности были разработаны некоторые дополнительные вариации, и то, что получилось, не выглядит скучным и повторяющимся. Вообще говоря, орнамент - это повторяющийся визуальный элемент (или несколько элементов), заполняющий данную область. Орнаменты встречаются в самых разных видах графического дизайна, например одежды и интерьеров, а равно в природе: поры апельсиновой корки или повторяющиеся прожилки на листе.
Хороший орнамент - лучший друг веб-дизайнера. Обширные области, в которых нет или почти нет контента, нужно чем-то заполнить. В одних случаях для этого достаточно сплошной заливки цветом, в других имеет смысл оставить пустое белое место, а иногда нужна какая-то визуальная деталь сверх одного лишь цвета. Ограничения, свойственные современному веб-дизайну, подталкивают к использованию орнаментов. Путем повторения простой небольшой картинки можно заполнить всю страницу, и в силу малого размера файла это обходится недорого в смысле затрат на передачу данных; повторяющимся изображением размером 500 байт можно, к примеру, замостить область шириной 900 пикселей. Управлять повторением позволяет определенное в CSS
свойство background-color. Оно может принимать значения repeat, no-repeat, repeat-x и repeat-y, то есть повторять карт - фотоинку, нарисовать только один раз или повторять в каком-то одном направлении.
пЗ {
background-repeat: no-repeat;
}
body {
background: #665999 url
}

Из этого примера видно, что свойство backgroundrepeat можно задавать отдельно, независимо от других свойств фона, или вместе с другими значениями в
составе стенографического свойства background.

Текстура

В Web не уделяется большого внимания тактильным ощущениям, впрочем, это характерно и для компьютерной индустрии в целом. Обратная осязательная связь часто встраивается в контроллеры игровых приставок, но помимо них почти не применяется в продукции, рассчитанной на массового потребителя. В начале этого десятилетия компания Logitech экспериментировала с мышками под общим названием iFeel, которые позволяли чувствовать «текстуру» некоторых графических элементов операционной системы и веб-страниц. Например, когда курсор мыши проходил над гиперссылкой, ощущался слабый толчок. В последнее время нам не доводилось слышать об этой технологии, a Logitech таких мышек больше не выпускает. Хотя идея была интересной, никто так и не придумал, как ее применить, и дело заглохло. Таким образом, текстуры в обычном понимании этого слова в Web отсутствуют; щелчок мышью - это, пожалуй, единственное тактильное ощущение. Но текстуру необязательно осязать, возможно и визуальное ее представление.
Скульптура может быть облачена в ниспадающие одежды, высеченные из камня. Мы знаем, что, коснувшись платья, ощутим лишь гладкость и твердость камня (рис. 3). Но в то же время каменное одеяние воспринимается как настоящая одежда, поскольку
обладает теми же визуальными характеристиками.
Орнамент и текстура взаимосвязаны. Часто с помощью орнамента осознанно или неосознанно создается имитация текстуры. А многие текстурные элементы естественным образом формируют орнаменты за счет повторения схожих фрагментов. Возможно, в основе орнаментов дизайна «В зеленых тонах» и не лежит фотография, но они безусловно напоминают реальные текстуры. Орнамент, составленный из точек, наводит на мысль о пупырчатой поверхности, а нечеткие квадратики походят на клетчатую ткань. Орнаменты с цветочными мотивами как будто сведены со старомодной подушки или богато украшенной драпировки. В целом при виде примененной структуры возникает образ удобного шезлонга, в который так и хочется опуститься.
Контрастность Однотонная цветовая гамма в неумелых руках может оказаться опасной. Изобилие цвета и деталей приводит к проблемам с контрастностью, о которых забывать не следует.
Контрастность позволяет разграничить различные элементы. Если контрастность мала, то элементы зрительно смешиваются и текст становится нечитаемым.
Если она слишком велика, то у зрителя возникает ощущение дискомфорта.

Высокая контрастность


Слишком высокая контрастность загромождает дизайн и ведет к «какофонии» утрированных визуальных образов. Узкий диапазон цветов в дизайне «В зеленых тонах» приемлем, потому что контрастность достигается за счет текстуры и типографских свойств текста. Вариант с более широкой цветовой гаммой был бы слишком кричащим (рис. 4). На протяжении многих веков печатное слово наносилось черной краской на белую бумагу. Хотя цветные типографские краски изобретены уже давно, но черное на белом - это лучший из всех возможных контрастов, создающий наиболее комфортные условия для чтения. Вообще говоря, то же верно и для чтения с экрана: максимальная контрастность достигается при рисовании черного текста на белом фоне.
Впрочем, бывают и исключения. Поскольку компьютерный монитор в отличие от печатной страницы излучает свет, ему присущи специфические ограничения. Яркий ЖК-монитор в темной комнате может оказаться слишком ярким для комфортного чтения.
Попытка прочитать с него что-нибудь в таких условиях может стать сущим мучением для глаз.
С точки зрения контрастности цвет представляет дополнительные проблемы. При некоторых сочетаниях близко расположенных цветов возникает оптическая иллюзия мерцания. Это так называемый эффект одновременного контраста. Когда два дополнительных цвета, например оранжевый и синий или зеленый и красный, находятся рядом, контраст получается особенно сильным и границы чрезмерно резки (рис. 5). Если такие дополнительные цветы перемежаются, то возникает неприятное для глаз
напряжение. Но в более тонких формах одновременный контраст может стать ценным инструментом для создания изысканных эффектов. Оранжево-желтый цвет может казаться более оранжевым на желтом фоне, но более желтым на оранжевом или красном фоне (рис. 6).
Тусклые цвета на еще более тусклом фоне могут казаться более яркими: например, бледно-красный может приобрести насыщенность, будучи нанесен на серый фон

Низкая контрастность


Слишком низкая контрастность создает общее впечатление тусклости дизайна. Контрастность необходима для того, чтобы отдельные элементы были различимы.
В случае дизайна «В зеленых тонах» используются разные оттенки зеленого цвета - от светлых до темных;
при меньшем разбросе цветов разрушилось бы впечатление от взаимодействия визуальных элементов, исчезло бы выделение и глазу было бы не на чем отдохнуть.
В итоге визуальный баланс был бы нарушен (рис. 7).
Низкая контрастность часто применяется для создания эффекта утонченности. Пиксели - это относительно большие и тяжеловесные единицы для целей дизайна; невозможно провести линию тоньше одного пикселя, так как пиксель неделим. Но, уменьшив интенсивность отбрасываемой линией тени, можно создать иллюзию, будто линия стала тоньше (рис. 8).
Аналогично: путем уменьшения контраста между различными элементами дизайна можно добиться эффекта смягчения и уменьшения значимости. Например, менее важный текст можно было бы выводить более светлым цветом. А если нарисовать неактивную иконку или ссылку неконтрастными цветами, то пользователь получит визуальное указание на то, что она недоступна. Возможности, которые предоставляет дизайнеру применение низкой контрастности, надо использовать правильно и с умом. Человек со стопроцентным зрением сможет без труда прочесть темно-серый текст на
светло-сером фоне, но близорукому придется щуриться или увеличивать размер шрифта, текст черного цвета легче различим.
На разборчивость текста влияет и контрастность цветов. У разных цветов разные характеристики. Например, чистый желтый по природе своей светлее синего,
поэтому желтый текст на белом фоне будет нелегко разобрать даже людям со стопроцентным зрением.

Цветовая слепота


Еще одним заслуживающим внимания аспектом контрастности является восприятие плохо сочетаемых цветов людьми, страдающими цветовой слепотой (рис. 9). Существуют две основных формы этой болезни и много разновидностей. Наиболее часто встречаются такие общие формы:
• протаномалия/дейтераномалия. При этом менее серьезном заболевании человек может видеть большинство цветов, но способность различать их понижена. Оно известно также под названием «аномальная трихромазия»;
• протанопия/дейтеранопия. Эта форма расстройства цветоощущения встречается реже, но более серьезна. Страдающие от нее не видят зеленого и красного цветов, оставаясь в желто-коричнево-синем мире. Болезнь называют также дихромазией.
У каждой формы заболевания есть разновидности, при которых понижена или полностью отсутствует способность различать комбинации красного, зеленого и
реже - синего. Цветовой слепотой страдает примерно один человек из двенадцати, причем у мужчин она встречается гораздо чаще, чем у женщин. Как пользователю, страдающему цветовой слепотой, представляется дизайн, в котором используются недо-ступные ему цвета? Ограниченное цветовое восприятие может означать, что тщательно выбранная палитра искажается до неузнаваемости, что особенно печально, если дизайнер хотел с помощью цвета передать какую-то информацию. Предлагать такому пользователю нажать красную кнопку бесполезно, ведь ему она кажется темно-коричневой или черной. Во многих случаях цвет элемента просто сливается с окружающей его областью, поэтому контрастность пропадает.
У дизайнера нет надежного способа имитировать цветовую слепоту. На первый взгляд кажется достаточным преобразовать дизайн к цветовой гамме, состоящей из
оттенков серого, но результат не будет соответствовать тому, что видят большинство зрителей-дальтоников. Существуют фильтры, предназначенные для имитации
разных видов цветовой слепоты, но они дают лишь некоторую аппроксимацию, особенности цветового восприятия уникальны у каждого больного.
Что же делать, если сайт нельзя протестировать? В пункте 2 из «Рекомендаций по доступности веб-контента» предлагается передавать любую информацию не только цветом, но еще хотя бы одним способом: ссылка может быть синей и подчеркнутой, зеленая кнопка может сопровождаться иконкой или текстом, предупреждение может быть напечатано красным и быть окружено сплошной рамкой.

Единство стиля


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




css









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



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



Поиск

***

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

20-ка посетителей: AnthonyDof, ChristooM, Kennethdiask, Ykohem, kcyzbbhuch, kapriollby, fluellusy, Danielpaild, MatthewCeap, brucexq60, maggiehn16, UrkrassFub, pattibu3, lonniect1, TufailOt, Javiersip, carriefe18, QTMike, LutherHet, Elisseyexak


Партнеры

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

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

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

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