Как сделать обводку градиенту

Как применить градиентную заливку к обводке (stroke) в Adobe Illustrator CS5 и более ранних версиях

В Adobe Illustrator CS6 появилась возможность применить градиенты к обводкам. Возможно ли это осуществить в более ранних релизах? В этом уроке я расскажу вам, как применить градиент к обводке, не используя Adobe Illustrator CS6.

Градиентная заливка пути (path) при помощи эффектов и панели Appearance

Используя инструмент Pen Tool (P), создаем произвольный путь.

Увеличим для наглядности ширину пути до 40 pt, используя панель Stroke (Window > Stroke)

Выделяем полученный объект и переходим Effect > Path > Outline Stroke.

Не снимая выделения, создаем группу, в которую будет входить созданный объект (Object > Group)

Открываем панель Appearance (Window > Appearance) и для данной группы создаем новую заливку, выбрав Add New Fill из меню панели.

Заменяем эту заливку на линейный градиент.

Для того чтобы заливка была применена только к пути переходим Effect > Pathfinder > Divide

Рассмотрим несколько вариантов редактирования пути с градиентной заливкой. Мы можем изменять положение опорных точек и ручек полученного объекта.

Для изменения формы профиля мы можем использовать Width Tool (Shift+W)

Мы можем изменить тип конца пути (cap); применить dashed line; использовать разные профили из панели Stroke и применять разные типы кистей из панели Brushes.

Как вы можете видеть, все эти преобразования сохраняют градиентную заливку на пути. Однако этот метод позволяет заливать обводку только линейными и радиальными градиентами. Если вы уже знакомы с новыми функциями Adobe Illustrator CS6, то знаете, что существует еще два вида градиентной заливки путей. Это градиентная заливка в доль обводки и градиентная заливка поперек обводки (gradient across stroke). Можем ли мы создать подобного вида заливки пути, не используя Adobe Illustrator CS6? Да, можем. Далее я расскажу, как это делается.

Градиентная заливка пути при помощи бесплатного плагина Mesh Tormentor

Создадим прямоугольник и c помощью Mesh Tool (U) преобразуем его в градиентную сетку (Gradient Mesh), которая состоит из нескольких строк. Окрашиваем узлы в разные оттенки серого цвета.

Не снимая выделения с объекта, создаем градиентную сетку для кисти, используя бесплатный плагин Mesh Tormentor. Кстати, рекомендую Вам прочитать мою статью: Полное руководство Mesh Tormentor (Gradient Mesh плагин). В данной статье есть ссылка на бесплатное скачивание плагина Mesh Tormentor.

Теперь перетаскиваем объект в панель Brushes и сохраняем кисть как Art Brush

Применим созданную кисть к произвольному пути.

Не снимая выделения с объекта, переходим Object > Expand Appearance

Читайте также:  Как сделать exe powerpoint

Теперь превратим путь в Gradient Mesh, нажав на соответствующую кнопку в панели Mesh Tormentor.

Таким способом мы получили градиентную заливку поперек обводки (gradient across stroke).

Если на начальном этапе вы создадите Gradient Mesh, которая состоит из нескольких столбцов, то в итоге получите градиентную заливку в доль обводки (gradient along stroke).

Конечно, с появлением Adobe Illustrator CS6 применять градиентную заливку к stroke стало проще. Но если вы продолжаете работать в более ранних версиях программы, то я думаю, эта статья будет вам полезна.

Оригинал урока на Английском языке: AstuteGraphics

Автор урока: Ярослав Лазунов

Источник

Как задать градиент для border в CSS?

Приветствую вас, дорогие друзья!

Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

Линейный градиент

Для примера рассмотрим такой блок:

Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:

Теперь нам нужно задать толщину рамки и её тип:

Для задания градиента допишем свойство border-image в css файле:

Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:

И последнее зададим CSS свойство:

Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:

Вот результат работы кода:

Особенности border gradient в CSS

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

2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:

  • 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.
  • Направление градиента border gradient

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

    При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

    В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
    Пример для border gradient слева направо:

    Источник

    Как создать блок с градиентной обводкой?

    Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи.

    Автор статьи Gradient Borders in CSS Крис Койер предлагает пойти простым путем. Можно сделать “элемент-обертку” с линейно-градиентным фоном, а затем внутренним элементом заблокировать большую часть фона, кроме тонкой линии вокруг нее. Выглядеть это будет следующим образом:

    Читайте также:  Как сделать огонь дракона

    Давайте пошагово разберем, что сделано в данном примере. У нас есть 2 блока — “обертка” и текст. “Обертке” задан градиент и без наложения второго блока она выглядит так:

    Текстовый блок находиться внутри этой “обертки” и его фон такой же как и фон окружения. Какие проблемы из-за этого могут появиться?

    Вот что будет, если внутреннему блоку не задать фон:

      А на следующем примере мы увидим, что будет, если внешний фон не совместим с внутренним:

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

    Усложним себе задачу и попробуем сделать скругленные углы обводки. На примере от Криса Коера с этим нет проблем.

    Но рассмотрим этот же пример в более реалистичной среде. На одном из проектов, над которыми работает наша студия, нам нужно было создать кнопки-теги с обводкой всего в 1 px (на приведенном выше примере бордер толщиной в целых 5 px).

    Этот пример достаточно показательный, ведь чаще всего обводка должна быть именно в 1 px. Тут врывается проблема с рендерингом браузера. Если настоящую обводку браузер почти всегда интерпретирует правильно (она всегда выглядит как 1 px вокруг блока), то данный подход такого не гарантирует. Если присмотреться — то обводка блоков в разных местах имеет разную ширину, и может меняться в зависимости от разрешения экрана. Когда элемент относительно маленький, то этого никто может и не заметить, но с большой красивой кнопкой с визуально разной шириной бордера сверху и снизу смириться будет сложно.

    Еще одним минусом становится анимация градиента. Для обводки шириной в 1 px анимация будет выглядеть мгновенной. На полноценную анимацию может уйти уйма времени и нервных клеток программиста.

    Рассмотрим второй подход к созданию градиентной обводки. В статье Как сделать border градиентом автор предлагает использовать достаточно хитрое свойство border-image-slice в сочетании с border-image:

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

    Что же не так с этим моментом? Радиус попросту не применяется. То есть когда мы прописываем свойство CSS, то оно никак не влияет на отображение блока.

    И вот что мы получаем в результате:

    Дальше в статье приводится пример с закругленными углами. Здесь применяется такой же метод, как и в предыдущем примере — “блок-обертка” и блок с контентом, который его перекрывает.

    Давайте подведем итоги этого разбора:

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

    Если сделать блоки с градиентом обводкой в 1–2 px, то нужно быть готовым, что ширина этой обводки будет неравномерной.

    Ограничения касаются только блоков с градиентной обводкой и радиусом бордера.

    Вместо заключения

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

    Источник

    Градиентная обводка блока на CSS

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

    Рассмотрим пару вариантов градиентных обводок.

    1. Прямоугольная обводка с острыми углами

    1. Создадим div.linear-gradient с градиентным фоном;

    2. Создадим внутренний блок div с небольшим отступом.

    Разметка HTML

    Стили CSS

    Результат

    2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after

    Разметка HTML

    Стили CSS

    Результат

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

    Понравилась статья?
    Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

    Вас может заинтересовать:

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

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

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

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

    Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

    Читайте в Блоге

    SEO оптимизация интернет сайта

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

    Источник

    Читайте также:  Как сделать гранаты сталкера
    Поделиться с друзьями
    Ответ и точка