Прощание с градиентами CSS3

  1. CSS3 градиенты: Да, на самом деле они довольно дерьмовые.
  2. Хорошо, так какова альтернатива?
  3. Шаг назад: что такое SVG?
  4. Как вы делаете SVG?
  5. Пример 1: Простые линейные градиенты
  6. Как насчет радиальных градиентов?
  7. Пример 2 - Световые эффекты
  8. Пример 3 - Винтажная галерея
  9. Как вы думаете?

Прежде чем мы начнем, давайте разберемся с одной вещью:

Я ♥ CSS3.

Я понимаю, что у нас никогда не было так хорошо. На самом деле, я не сомневаюсь, что путешественники во времени, посещающие с 2004 года, будут болеть ревностью по поводу того, как легко мы теперь вызываем закругленные углы, тени и вращения объектов.

Конечно, специфичные для браузера префиксы (то есть -moz, -webkit -o и т. Д.) Являются раздражением, но, к счастью, остальная часть обозначений разумна, последовательна и надежно поддерживается во всех современных браузерах.

То есть, с одним заметным исключением ...

CSS3 градиенты: Да, на самом деле они довольно дерьмовые.

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

Что еще более важно, поддержка сложна в большинстве браузеров и отсутствует в некоторых.

Вот снимок текущего состояния игры:

Браузер Radial CSS Linear CSS Firefox -moz-radial-градиент (500px 25%, круг, синий 20px, #eef 40px); -moz-linear-Gradient (вверху, # 444444, # 999999);) Chrome 11, Safari 5 -webkit-radial-Gradient (# cde6f9, # 81a8cb); -webkit-linear-Gradient (вверху, # 444444, # 999999);) Chrome -webkit-градиент (радиальный, 500 25%, 20, 500 25%, 40, от (синий) до (#eef)); -webkit-Gradient (линейный, слева вверху, слева внизу, от (# 444444) до (# 999999)); Opera 11 Нет поддержки -o-linear-Gradient (вверху, # 444444, # 999999);) Opera 10- Нет поддержки Нет поддержки IE10 бета-MS-радиальный градиент (верхний центр, круговая обложка,
оранжевый, желтый 25px, бирюзовый) -ms-линейный градиент (30 градусов, оранжевый, желтый 50%, бирюзовый); IE9 Нет поддержки Нет поддержки IE8 Нет поддержки -ms-фильтр: "progid: DXImageTransform.Microsoft.gradient (la la la ... IE5-7 Нет поддержки фильтра: progid: DXImageTransform.Microsoft.gradient (la la la ..

Вау, это выглядит весело, а? Короче говоря, это тупой инструмент с капризным синтаксисом и пятнистой поддержкой.

Хорошо, так какова альтернатива?

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

Может быть, мы смотрим на это неправильно?

В 2011 году SVG на самом деле хорошо поддерживается всеми текущими распространенными браузерами - даже на мобильных устройствах. Что делать, если мы начали с SVG и залатали края? Оглядываясь назад на 15-летнюю эволюцию CSS, это было медленное, часто мучительное развитие. При такой скорости разработки трудно представить, чтобы CSS когда-либо превращался в действительно мощный, гибкий инструмент визуального дизайна.

Но с SVG, возможно, у нас сегодня полнофункциональный визуальный язык.

Шаг назад: что такое SVG?

Итак, если вы думаете ' SVG? Это новый Фольксвагон, верно? давайте сделаем быстрый улов.

Масштабируемая векторная графика (SVG) - это формат файлов на основе XML для описания двухмерной векторной графики. Как и формат AI Illustrator, он создает изображения с использованием математики и геометрии, а не сетки пикселей (например, JPEG, PSD и т. Д.). Это дает изображениям SVG некоторые очень важные для сети суперспособности - главным образом, SVG масштабируется без искажений при сохранении крошечных размеров файлов.

Как вы делаете SVG?

Есть немало способов сделать свой собственный SVG.

  • Код руки : если вы достаточно умны, просто откройте свой старый текстовый редактор и начните печатать. Как и большинство форматов XML, SVG в основном имеет смысл, когда вы читаете его.
  • Иллюстратор : Adobe Illustrator Можно экспортировать в SVG, хотя, честно говоря, код не совсем стройный и сексуальный. Может быть, не правильный инструмент здесь.
  • Inkscape : Inkscape это мощный бесплатный редактор с открытым исходным кодом, который использует SVG как собственный формат файла. У него по праву много поклонников, но он может быть излишним для создания простой графики, готовой к вебу.
  • Ворон : Вольер ворон это векторное онлайн-приложение, которое включает опцию «сохранить в SVG». Raven основан на Flash, но в остальном он бесплатен и пишет вполне приличный код.
  • SVG Edit : мой личный фаворит, SVG Edit от Google's Pavol Rusnak (размещен на Google Code)

Последнее может быть сюрпризом, так как Google Code не совсем первое место, которое вы думаете, когда речь заходит об инструментах визуального дизайна. Да, это так же уродливо, как бульдог ест кашу. Но, к счастью, в этом есть еще много чего:

  1. Это бесплатно, и мы всегда любим бесплатно.
  2. Он построен из простого старого JavaScript, HTML, CSS и SVG, так что вы можете использовать Онлайн-версия Google или запустите копию в вашей локальной системе.
  3. Это пишет трудную, чистую, читаемую разметку.
  4. SVG Edit разработан, чтобы держать вас в тесном контакте с кодом SVG на протяжении всего процесса.

Последний пункт важен. Как дизайнеры внешнего интерфейса, мы склонны недоверчиво относиться к инструментам WYSIWYG, которые скрывают от нас код. Действительно, большинство из нас гордятся ручным кодированием наших шестнадцатеричных цветов, стеков шрифтов, настроек высоты строки и ритмов базовой линии. Черт, некоторые из нас даже выбирают цвет наших футболок, основываясь на их значениях RGB (без указания). SVG Edit призывает вас «быть ближе и ближе» с SVG таким же образом. Это будет становиться все более полезным, чем больше вы будете работать с SVG.

Этого достаточно теории. Давайте рассмотрим простейшие примеры SVG.

Пример 1: Простые линейные градиенты

1. Открыть SVG Edit в вашем браузере (по ссылке раздел Демо).

Открыть   SVG Edit   в вашем браузере (по ссылке раздел Демо)

Пустое приложение SVG Edit

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

Ницца. Вы только что написали немного SVG.

3. Затем выберите инструмент прямоугольник на левой панели инструментов и вытяните прямоугольник примерно того же размера, что и ваш документ. Ваш прямоугольник, скорее всего, будет иметь контур обводки по умолчанию. Внизу вашего редактора вы заметите элементы управления заливкой и обводкой. Удалите обводку, установив ширину обводки на 0 пикселей.

4. Вернувшись к представлению кода SVG, вы увидите, что тег atag был добавлен с набором свойств для цвета, обводки и размера. Отличительной особенностью SVG является то, что он, как правило, очень удобочитаемый. Поскольку мы избавились от обводки, вы можете при желании удалить свойства ширины обводки и цвета обводки. Если ваш прямоугольник не совсем соответствует вашему холсту, отредактируйте ширину и высоту вручную, чтобы соответствовать документу. Это должно выглядеть примерно так:

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <g> <title> Слой 1 </ title> <rect fill = "# ff0000" x = "0" y = "0" height = "480" width = "640" id = "svg_1" /> </ g> </ svg>

5. Перейдите обратно к представлению визуального редактора. Выбрав новый прямоугольник, нажмите на цветной чип Fill (рядом с корзиной). Запускается всплывающее окно с вкладками, которое позволяет выбирать между сплошным цветом, линейным и радиальным градиентом. Посмотрим правде в глаза: сплошной цвет SVG здесь менее полезен, чем обычный старый CSS, но две другие вкладки очень полезны.

Попробуйте панель линейного градиента. Вы можете выбрать начальный и конечный цвета с помощью палитры цветов. Настройки 'x' и 'y' определяют направление вашего градиента. Верхний левый угол - это позиция 0: 0, а нижний правый угол - 1: 1, поэтому начальный стоп 0: 0 и конечный стоп 1: 1 приведут вас сверху вниз к правому нижнему углу. диагональный градиент.

Изменение конечной остановки на 0: 1 переключит ваш градиент с горизонтального на вертикальный. Вы заметите, что внизу есть ползунок, который позволяет вам контролировать прозрачность всего объекта. Кроме того, вы можете установить разные уровни прозрачности для каждой остановки с помощью палитры цветов. Попробуйте выбрать начальный и конечный цвет, а затем взгляните на SVG. Это должно выглядеть примерно так.

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <defs> <linearGradient y2 = "1" x2 = "1" y1 = "0" x1 = "0" id = "svg_2"> <stop stop-color = "# ff0000" offset = "0 "/> <stop stop-color =" # ffff00 "offset =" 1 "/> </ linearGradient> </ defs> <g> <title> Слой 1 </ title> <rect id =" svg_1 "height =" 480 "width =" 640 "y =" 0 "x =" 0 "fill =" url (# svg_2) "/> </ g> </ svg>

Эта разметка должна казаться знакомой. Вы увидите, что градиент определяется вверху между тегами и имеет уникальный идентификатор - «svg_2». Стопы обозначают наши начальные и конечные цвета. Ниже вы увидите тег, который ссылается на градиент через его идентификатор (id = ”svg_2 ″).

Давайте добавим это в браузер.

Откройте представление кода SVG, выберите разметку и скопируйте ее в буфер обмена. Затем откройте ваш любимый редактор кода, создайте новый документ и вставьте ваш SVG в.

Сохраните ваш документ как «Gradient.svg» в папку тестирования. Затем создайте пустой HTML-документ и в заголовок добавьте следующий код.

<style> html {background: url (градиент.svg); размер фона: 100% 100%; высота: 100%; } </ style>

Сохраните HTML-документ с вашим SVG и просмотрите его в браузере. Вы должны смотреть на элегантный двухцветный градиент, который легко масштабируется, чтобы заполнить ЛЮБОЕ текущее окно браузера.

« А как насчет трех или более цветовых градиентов? ' ты говоришь.

Легко. Вернитесь к градиенту в вашем редакторе кода. Вы заметите, что остановки в нашем линейном градиенте имеют смещения 0 и 1 соответственно. Добавьте новый со смещением 0,5 и любым цветом, который вам нравится, и поместите его между двумя другими остановками, например так:

<stop stop-color = "# ff0000" offset = "0" /> <stop stop-color = "# 00ff00" offset = ". 5" /> <stop stop-color = "# ffff00" offset = "1" />

Сохраните и перезагрузите, и теперь у вас должна быть трехцветная радуга.

Итак, вы можете подумать: « Хорошо, но мы можем сделать это с помощью градиентов CSS3 - что в этом такого? «Это очень верно, но у SVG есть некоторые приятные преимущества.

  • Наш CSS настолько чист, что вы можете его съесть.
  • Мы можем настроить и настроить наш градиент, не выходя из редактора кода.
  • Теперь у нас есть один набор чисел для управления, а не 4,5 или 6 синтаксисов. (Даже если предположить, что нам еще придется взломать старые IE)

Это хорошо, что насчет примера, который не может быть воспроизведен с помощью чисто CSS-решения.

Как насчет радиальных градиентов?

SVG Edit - Панель радиального градиента

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

По умолчанию градиенты центрируются на вашей фигуре (например, положение x = 0.5, y = 0.5), но вы можете свободно перетаскивать и перемещать центральную точку в любое время.

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

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

Даже самые модные из новых браузеров не могут сделать это с помощью чистого CSS.

Великие режиссеры, такие как Билли Уайлдер и Альфред Хичкок, используют свет и тень, чтобы рассказать свою историю.

Пример 2 - Световые эффекты

Недавно я смотрел старую классику Сансет Бульвар и это заставило меня задуматься о том, как блестяще режиссеры, такие как Билли Уайлдер и Альфред Хичкок, использовали тень и свет для создания драмы. Тени почти становятся другим персонажем в истории.

Тени почти становятся другим персонажем в истории

Бесшовные плитки хороши, но они должны быть ровными, чтобы работать

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

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

Что если бы мы объединили сильные стороны SVG с точечными растровыми изображениями, чтобы получить лучшее из обоих миров?

Давайте начнем с этой основной бесшовной кирпичной плитки (слева). Оказывается само Это не особенно впечатляет. Конечно, мы могли бы использовать принцип цикады рандомизировать структуру кирпича, но я думаю, что это плоское, стерильное освещение, которое действительно делает его тусклым. Давайте это исправим.

Используя SVG Edit, я создал простой полночный синий прямоугольник с полупрозрачным центром радиального градиента.

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

Я переместил фокус в верхний левый угол, чтобы дать ему ощущение прожектора

Радиальные градиенты в SVG

Копирование кода в новый файл SVG должно выглядеть примерно так:

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <defs> <radialGradient id = "svg_3" cx = "0.5" cy = "0.5" r = "0.5" fx = "0.19" fy = "0.19"> <stop offset = "0" stop- color = "# 000000" stop-opacity = "0" /> <stop offset = "1" stop-color = "# 120747" /> </ radialGradient> </ defs> <g> <title> Слой 1 </ title> <rect fill = "url (# svg_3)" x = "0" y = "0" height = "480" width = "640" id = "svg_1" fill-opacity = "0.72" /> </ g > </ svg>

Как видите, он все еще очень лаконичен и легко читается.

Во-первых, мы настроим резервный фон для старых (в основном IE) браузеров, которые не поддерживают несколько фонов. Мы также установим высоту HTML-элемента на 100%, чтобы наше изображение заполняло браузер.

html {background: url (bricks3.jpg); высота: 100%; }

Далее мы добавим наш мульти-изображение фона. Кирпичная плитка находится сзади (последняя), и наш SVG накладывает ее.

html {background: url (bricks3.jpg); фон: url (spotlight.svg), url (bricks3.jpg); высота: 100%; }

Примечание. Я использую сокращенное свойство CSS background 'background' вместо 'background-image', так как старые IE, кажется, пытаются читать несколько изображений как одно длинное изображение, когда вы используете более конкретную запись. Derp.

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

html {background: url (bricks3.jpg); фон: url (spotlight.svg), url (bricks3.jpg); размер фона: 100% 100%, авто; / * auto is tile * / height: 100%; } html {background: url (bricks3

Сочетание SVG с простой плиткой.

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

Я думаю, что есть ряд моментов, которые стоит отметить.

Первое, что меня поражает, это то, как сильно очень простой SVG может оказать на плоскую плитку. Изменяющийся свет означает, что даже сильно повторяющиеся кирпичи кажутся куда менее заметными, чем раньше.

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

Поддержка SVG в фонах CSS хороша во всех современных браузерах.

  • Chrome (с мая 2010 года)
  • Firefox (март 2011 г.)
  • IE9 (бета-версия марта 2010 г.)
  • Сафари (июнь 2010)
  • Опера (июнь 2008).

Старые браузеры будут радовать рендеринг кирпичей, но не SVG - для этого примера это неплохой результат. Я не собираюсь вдаваться в подробности здесь, но вы можете рассмотреть альтернативные варианты для Firefox 3.6 и IE8 - ваш вызов.

Пример 3 - Винтажная галерея

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

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

В этом последнем примере мы собираемся создать свободную картинную галерею в винтажном стиле. HTML-код для нашей галереи очень чистый - неупорядоченный список изображений Flickr любезно предоставлен Национальная библиотека или Ирландия , Я хочу создать автоматически изменяющий размер SVG-кадр для каждого изображения.

Возвращаясь к SVG Edit, я собираюсь создать этот новый рисунок из двух более простых форм.

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

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

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

Я установил мое размытие на 6, чтобы получить мягкий край, который вы видите ниже

Установка фильтра размытия на 6 дает нам мягкий эффект тени.

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

Возьмите код из редактора и вставьте его в новый документ SVG. Теперь у нас есть простая, масштабируемая рамка это идеально подходит для наших нужд.

Давайте посмотрим на CSS.

ul li {background: url (polaroid.svg); -moz-background-size: 100% 100%; размер фона: 100% 100%; Дисплей: встроенный блок; набивка: 2% 2,5% 3% 2%; стиль списка: нет; ...} ul li {background: url (polaroid

Использование простого SVG для имитации внешнего вида глянцевой фотобумаги

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

Я также использую display: inline-block в элементах списка, чтобы фотографии складывались по экрану. Обычно это делает их более элегантными, чем плавающие элементы списка.

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

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

Наш SVG легко адаптируется к любому изображению независимо от его размера или ориентации.

Наконец, я использую вращение CSS3, чтобы придать галерее ощущение рассеянности. Я не собираюсь разбирать код для этого здесь, но Фрэнк Фукс разработал эту идею в мае.

Вот результат ,

Как вы думаете?

Мне очень нравится этот подход. Сильные стороны SVG кажутся очевидными. Каждое появление SVG масштабируется, вращается и изменяется без какого-либо искажения или потери качества изображения. Размер файла на порядок меньше - измеряется в байтах, а не в килобайтах.

Также приятно иметь возможность регулировать размытие или непрозрачность с помощью нескольких ленивых нажатий клавиш.

Конечно, есть некоторые недостатки, но не слишком много.

В настоящее время IE9 прекрасно поддерживает SVG, но, к сожалению, нет фильтров SVG, поэтому наша тень выглядит четкой.

Неудивительно, что более ранние версии IE игнорировали SVG, но на самом деле это отсутствие поддержки свойства CSS3 фонового размера, которое является настоящей демонстрацией здесь. Масштабирование SVG - вот где настоящая сила. Возможно, вы сможете создать запасной вариант IE8 с фильтрами Microsoft. Удачи с этим. В любом случае, CSS3-градиенты, конечно, не ваш спаситель.

Единственным другим значимым браузером, не поддерживающим SVG, кажется любой Firefox до версии 4, и с переходом Mozilla на автоматические обновления это становится меньшей проблемой каждый день. Как ни странно, Firefox фактически прекрасно поддерживает SVG с 2008 года - только не в фонах CSS, где они так полезны. Я снова говорю, сумасшедший.

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

Принеси эпоху SVG!

Хорошо, так какова альтернатива?
Шаг назад: что такое SVG?
Как вы делаете SVG?
Вау, это выглядит весело, а?
Хорошо, так какова альтернатива?
Может быть, мы смотрим на это неправильно?
Шаг назад: что такое SVG?
Это новый Фольксвагон, верно?
Как вы делаете SVG?
Как насчет радиальных градиентов?