Добавление двух градиентов на страницу. CSS: Линейный градиент для фона

Для любой профессии существует масса книг, которые помогают изучить предмет более глубоко. Если вы дизайнер, веб-дизайнер, иллюстратор – то эта статья для вас! Впрочем, она будет полезна любому человеку, работающему в области рекламы. В этой подборке список книг, которые должен прочесть (или хотя бы пролистать) каждый дизайнер

Что такое хорошая типографика? Каковы критерии ее качества? Как добиться лучших результатов в оформлении текста? Книга Брингхерста помогает во всем этом разобраться.

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

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

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

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

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

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

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

Книга, предлагаемая вашему вниманию, создана для специалистов-практиков -дизайнеров, программистов, вебмастеров, менеджеров, маркетологов. Большую пользу для себя и возглавляемых ими проектов извлекут из этого руководства те, кто, платят деньги. Сайты современных больших компаний сегодня во многом определяют судьбу последних. Однако топ-менеджеры не всегда достаточно компетентны в вопросах юзабилити, которые в последнее время приобрели важнейшее значение. Принципы успешного веб-дизайна описаны автором предельно ясно и с чувством юмора, а их освоение поможет вам задавать экспертам правильные вопросы и получать ответы, которые позволят находить решения трудных технических, эстетических и структурных проблем разработки сайтов.

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

В издании объясняются базовые принципы веб-дизайна, подробно рассматриваются типы сайтов, элементы дизайна, стили и темы, структурные стили и структурные элементы сайтов. Книга включает более 650 примеров веб-сайтов, упорядоченных тематически, благодаря чему вы сможете легко отыскать креативные образцы для использования в своей работе.

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

Реальность, с которой все мы сталкиваемся, – это созданные словно по шаблону сайты компаний, интернет-магазины, информационные порталы… Однообразие не лучший инструмент для привлечения клиентов. Эмоции продают!
Чтобы сайт притягивал клиентов, оказывается, достаточно сделать так, чтобы его вид вызывал положительные эмоции. Удовольствие, удивление в сочетании с неповторимым стилем – вот основы эмоционального дизайна.
Освоить его азы и предлагает эта книга. На ее страницах вы найдете подробное описание новых механизмов взаимодействия с вашей аудиторией, а также практические рекомендации, как завоевать сердца клиентов.

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

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

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

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

Автор книги, доктор физических наук Якоб Нильсен - признанный во всем мире специалист в области интерфейсов и удобства эксплуатации, — делится с читателем своими знаниями и опытом. Им был разработан ряд методик, направленных на быстрое и экономичное усовершенствование пользовательского интерфейса, включая эвристическую оценку. Он является обладателем 38 патентов США на разработки, ориентированные, главным образом, на повышение удобства работы пользователей с Интернетом. Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления страниц до упрощения структуры навигации и создания профессиональных сайтов. В книге вы не найдете описаний каких-то конкретных программ и кодов на HTML. Она отвечает на самыйглавный вопрос дизайна : "Что именно нужно сделать, чтобы посетителям сайта было удобно с ним работать?"

Скоро, уже совсем скоро, сайты будут легче загружаться, и делать их можно будет вообще без картинок.

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

Создаём CSS-градиенты без картинок

Предположим, что мы хотим сделать градиентный переход в фоне от серого к черному. Для этого корпорация W3 предложила в CSS3 использовать специальную директиву linear-gradient.

Итак, по версии W3 для того, чтобы сделать градиентный фон достаточно написать в селекторе блока:

Background: linear-gradient(start, color1 position1, color2 position2,...,colorN positionN);

И браузер самостоятельно прорисует градиентный фон в блоке.

Очевидно, что цветов и контрольных точек в градиенте может быть много. Параметр start указывает в каком направлении должен распространяться градиент - это может быть или top для вертикально-направленного градиента или left для горизонтально-направленного.

Не все браузеры поддерживают такую фишку, поэтому пока существует ряд ухищрений. Для совсем старых браузеров нужно либо указывать какой-то средний цвет фона (градиента не будет вовсе, но фон не будет белым), или указывать картинку с градиентом (правда, если цель использования linear-gradient на CSS - это сокращение количества загружаемых картинок, то это бесполензно, потому, что во всех браузерах картинка все-равно подгрузится, хоть и будет потом заменена на linear-gradient).
Для IE-подобных браузеров можно использовать градиенты, основанные на фильтрах, а для браузеров на webkit (Safari, Chrome) и gecko (Mozilla), как всегда существует альтернатива: -webkit-gradient и -moz-linear-gradient, которые принимают похожие параметры. Как это всё должно работать смотрите в следующем код-блоке:

Background: #999; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); background: -moz-linear-gradient(top, #ccc, #000);

После рендеринга это выглядит вот так.

Цветовой градиент - это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B . Градиент может иметь и более двух опорных точек - тогда переход совершается от точки A к точке B , затем от точки B к точке C и так далее.

Как сделать фоновый линейный градиент в CSS

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Background-image: linear-gradient(to left, violet, red); Фоновый градиент на блоке