Как создать блок с градиентной обводкой? / Хабр
Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного 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, то нужно быть готовым, что ширина этой обводки будет неравномерной.
Ограничения касаются только блоков с градиентной обводкой и радиусом бордера.
Вместо заключения
Стоит упомянуть, что достаточно проблематично анимировать бордеры с градиентом. Такие моменты нужно обсуждать заранее и при возможности отбросить их необходимость. Вместо этого можно сделать внешнюю анимацию — добавление тени, смещение блока и т.д. Также если кто-то предложит вам вставить кнопку картинкой, смело отметайте этот ужасный вариант. Для каждой кнопки нужна будет отдельная картинка, текст в ней изменить нельзя и их вес на порядок больше, чем у реализации кодом. Это все скажется на скорости работы страницы, работы с ее админкой и на будущей поддержке сайта.
Наложение градиента на изображение в HTML при помощи CSS
Многие привыкли накладывать градиент на изображение при помощи графического редактора. Но что делать, если градиент нужно изменить? Все верно.
Нужно открыть исходник макета в графическом редакторе и изменить градиент. Все проблемы решает использование каскадных таблиц стилей для его изменения.
Я не буду вдаваться в большие подробности и сразу представлю код наложения градиента на изображение при помощи CSS.
<div></div>
Результат код на изображении ниже.
Обратите внимание, что изображение накладывается в видео фона (background-image). Выше представлен сокращенный код. Я сразу прописал необходимые спецификации для свойства background.
Итак, у нас имеется контейнер с шириной 640 точек и высотой 480 точек. Мы подгружаем в него изображение, помещаем его в центре и подгоняем под размеры контейнера. Так мы не сильно зависим от размера изображения и можем сделать контейнер адаптивным (если укажем ширину 100%).
linear-gradient(180deg, rgb(20 47 88 / 0%) 0%, #143458 100%
Как раз эта часть CSS отвечает за наложение градиента поверх помещаемого изображения. Единственной сложностью, с которой вы можете столкнуться – это изменение самого градиента в CSS.
Но спешу обрадовать, вам не нужно искать сайты с генерацией этих градиентов. Все можно изменить при помощи обычного браузера.
Рассмотрим изменение градиента CSS при помощи Google Chrome.
Итак, наводим на наше изображение с градиентом и нажимаем правой кнопкой мыши.
В контекстном меню выбираем «Просмотреть код».
В появившейся панели справа мы видим CSS код с параметрами вставки изображения.
Наш градиент построен таким образом, чтобы идти он прозрачного к полному затемнению синим цветом.
Для изменения основного цвета нужно нажать кнопкой мыши на темно-синий квадрат, как указано на рисунке.
После появится панель цвета.
Здесь, передвигая ползунки, вы можете поменять цвет, например, на темно-зеленый. В итоге наше изображение в целом измениться.
Здесь также можно перемещать нижний ползунок, он отвечает за прозрачность и установлен по умолчанию на 100%.
Для того, чтобы поменять верхнюю часть градиента CSS на изображении – вам необходимо проделать те же манипуляции, но с первым квадратиком.
В этом случае цвет установлен на полную прозрачность.
Также здесь вы можете изменить угол градиента. Со 180 градусов (вертикального) можно установить любой другой угол.
Например, изменение этого параметра на 90 приведет к тому, что мы получим не вертикальный, а горизонтальный градиент CSS.
Результат:
После того как вы перекрасите и повернете заливку так как вам необходимо, вы должны аккуратно скопировать CSS код из панели редактирования и вставить в свой HTML файл. И все, все изменения будут применены.
Важно! Во время редактирования CSS не обновляете старицу HTML, иначе все ваши изменения будут сброшены и придётся все проделывать заново.
Поделиться в соц. сетях:
Создание градиентов — Документация по Inkscape для начинающих 1.0
Ctrl + F1 или G
Inkscape позволяет удобно создавать и изменять градиенты на холсте.
Однако полезно всегда иметь диалоговое окно «Заливка и обводка».
в пределах досягаемости, так что вы можете легко изменить цвета.
Инструмент градиента можно активировать на панели инструментов. Чтобы применить градиент к объект, вам нужно сначала выбрать объект. Затем щелкните и перетащите объект с помощью инструмента «Градиент».
Теперь на объекте появятся две новые ручки, одна квадратная, одна круглая, которые соединены синей линией. Квадрат символизирует начало градиент, а круг его конец.
По умолчанию инструмент создает линейные градиенты с двумя точками (т.е. 2 ручки с по одному цвету). Цвет начальной остановки непрозрачный, цвет конечной остановки полностью прозрачен. Таким образом, ваш объект будет выглядеть так, как будто он исчезает.
Чтобы изменить направление и положение градиента, просто переместите квадрат или круглая ручка с мышью.
Чтобы изменить цвета градиента:
выберите одну ручку градиента (круглую или квадратную) с помощью инструмента «Градиент»
в диалоговом окне «Заливка и обводка» выберите нужный цвет или щелкните на цвете в палитре, чтобы назначить его выбранной остановке градиента.
Чтобы создать градиент с более чем двумя цветами, можно дважды щелкнуть Инструмент «Градиент» на синей линии, проходящей между ручками. Это создаст новая ромбовидная ручка. Теперь вы можете изменить его цвет. Результат будет сразу показать на холсте. При перемещении ромбовидной ручки вдоль линию с помощью мыши, цвета градиента также будут двигаться.
Вы можете преобразовать линейный градиент в радиальный, используя верхнюю строку в диалоговом окне «Заливка и обводка». Вы можете также замените старый градиент, создав новый с помощью Gradient инструмент. Для этого кнопка радиальных градиентов на панели управления инструментом должна быть выбрано.
Когда к объекту применен радиальный градиент , градиент символизируется не прямой линией, а углом, имеющим квадратную ручку в посередине и две круглые ручки на концах его рук. Длина Arms представляет диаметр радиального градиента.
К заливке объекта и к его обводке могут быть применены отдельные градиенты.
Прямоугольник с градиентом от желтого до прозрачного. В вверху панель управления инструментом показывает, что объект имеет линейный градиент с две стопы, одна желтая, другая прозрачная. Каждую точку можно изменить в диалоговом окне «Заливка и обводка» после того, как соответствующая точка была выбрана. выбранный на холсте.
Линейный градиент с 5 ступенями.
Положение каждой остановки (цвет) можно изменить прямо на холсте.
Линейный градиент можно преобразовать в радиальный градиент и наоборот.
Радиальный градиент можно перемещать целиком, перетаскивая квадратный маркер.
Как сделать полный градиент фона на веб-сайте CSS
Привет, в этом видео мы узнаем, как добавить градиент на фон веб-сайта. Мы позаботимся о том, чтобы все прошло до конца. Мы поиграем с направлением. Мы собираемся посмотреть на… мы собираемся закончить вот так с хорошим тонким градиентом, но мы собираемся посмотреть на плохие, мы собираемся показать вам, где черпать вдохновение для градиентов, разных интересные места, как выбрать их с веб-сайта с помощью классного маленького плагина.
Добавить градиент очень просто. Мы собираемся сделать это с тегом Body, потому что он покрывает весь фон. На данный момент у нас есть существующий цвет, давайте удалим его. Итак, фоновый цвет, представьте, если бы мы могли просто ввести background-gradi… о, его не существует. Как ни странно, для этого вы используете фоновое изображение. Итак, фоновое изображение, затем вы начинаете вводить либо линейный, то есть букву «L», которую вы можете увидеть вверху, линейный градиент, либо букву «R» для радиального градиента. Вам решать, хотите ли вы круг или прямую линию. Мы собираемся использовать линейный градиент.
Здесь в скобках вводим два цвета через запятую. Он будет делать красный и желтый, потому что вы заметите, что когда я начинаю печатать, он не предварительно заполняет цвета, как обычно, просто потому, что это странный вариант использования.
Я вставил это, поставил точку с запятой в конце: «Сохранить все». Предварительный просмотр в браузере, и вот оно, пламенное. Не беспокойтесь, что он остановится здесь, мы поговорим об этом через секунду, но на данный момент это все, линейный градиент, по умолчанию он идет сверху вниз. Вы можете возиться с этим, вставив значение прямо перед красным. Вы можете использовать как 90 градусов, запятая, значит 90 градусов. Сохраните его, и теперь он идет слева направо, или есть какой-то странный синтаксис, где вы можете сделать, это немного странно, это вроде хорошо. Вы можете сказать «направо».
Некоторые из них действительно странные, например: «Эй, вы должны использовать это случайное фоновое изображение, чтобы сделать градиент», но затем мы собираемся использовать это действительно разумно, например, я не знаю, фонетически правильное код. Так что это будет делать то же самое, так что «направо», «налево», давайте посмотрим, это идет наоборот, это не имеет значения. Вы можете использовать степени или что-то подобное, что вам подходит.
Я собираюсь оставить это, труднее всего идти прямо вверх и вниз. Вы можете добавить более одной остановки. Итак, на данный момент красный переходит в желтый, но мы могли бы сказать, красный в желтый и в синий, но это выглядит хорошо. Бум.
Если вы использовали что-то вроде Adobe Illustrator, я чувствую, что именно здесь они черпают идеи для градиентов по умолчанию, они там ужасны. В любом случае, есть еще кое-что, что вы можете сделать. Я никогда не могу вспомнить весь синтаксис для этого. Я поместил ссылку в ваш текстовый документ, он находится в вашем файле Project2 и называется Text. Там есть весь контент, который мы использовали до сих пор, я поместил эту ссылку здесь, для w3schools.com. Это действительно хорошее объяснение всего, что вы можете сделать. Получится красиво, посмотри. Смотри, ты можешь добавить множество цветов. Просто отделите их, вы можете видеть здесь, просто отделите их от цвета, извините, запятой. Вы можете поставить прозрачность, вы можете делать повторяющиеся вещи.
Я не буду описывать все это, потому что… возможно, вы ищете, я не знаю… вау, несколько хороших. Так что здесь можно делать много разных вещей. Просто прочитайте, чтобы получить то, что вам нужно. Перестань листать, Дэн, ты вызываешь у людей головокружение.
Другие вещи, которые я хочу вам показать, это то, что мы как бы получаем мои идеи для градиентов, есть пара мест, верно? Grabient действительно хорош, на самом деле, прежде чем мы перейдем к этому — потому что это — вы можете не заботиться о градиентах, но вы можете заботиться о том, где эта штука останавливается. Итак, пара вещей. Этот останавливается здесь, потому что наш контейнер заканчивается здесь, потому что на данный момент это довольно маленький веб-сайт. Это как бы просто заканчивается там, и это на самом деле повторяется. Это повторяется на фоне. Мы могли бы попробовать добавить запрет на повторение, но тогда у вас просто будет коробка другого цвета. Так что способ обойти это, я знаю, когда я создаю сайт, он станет длиннее, и это исчезнет.
Это только потому, что мой экран очень большой. Если я уменьшу его, если вы используете меньший экран, у вас, вероятно, даже не возникнет этой проблемы. Во время этого курса вы думаете: «Где эта проблема?», Но на экранах некоторых людей, таких как этот, это проблема. Так что, если я создавал сайт, я просто покидал его, зная, что мой сайт станет больше, и это не будет проблемой, потому что, слушайте, вот к чему мы идем, верно? Это своего рода тестовая версия, которую я сделал, и поскольку она такая большая, что полностью уходит за пределы экрана, и нет смысла делать следующую вещь, но вы можете столкнуться с этой проблемой, и все, что вам нужно сделать, чтобы Исправьте это, это Visual Studio Code, и вверху здесь мы собираемся настроить таргетинг на наш HTML-тег.
Помните, что наш HTML — это весь документ, а тело — это все, что видит пользователь. Вы можете делать что-то с HTML. И эта штука здесь, если я сделаю высоту 100%, я действительно не знаю, почему это работает, я просто знаю, что это решит нашу проблему.
Я вижу, как это затягивает, когда люди говорят: «Эй, включи градиент, вставь скрытие», никто никогда не объясняет, почему, и я до сих пор не знаю, почему, так что, эй, хо. Давайте посмотрим. Вернемся к нашему оригиналу. Вот и все, мой захватывающий градиент, весь путь. Итак, давайте отойдем от небрежных цветов и посмотрим, откуда я черпаю свои идеи градиента.
Действительно хорошее место называется Грабиент; graient.com, и у них действительно крутые цвета. У вас есть куча страниц, и вы… если вы прошли какой-либо из моих курсов, вы, вероятно, увидите некоторые из них, потому что я использую их просто как идею, как руководство. Мне нравится вот этот. Итак, как я добавляю это в код VS, вы видите здесь, если я наведу указатель мыши на этот цвет, это даст мне это. Я могу нажать на нее, скажем, ты мой друг, ты пойдешь со мной. Я возьму хэш и все остальное, и все, что мне нужно сделать, это заменить красный на него.
Вот это, скопируйте и вставьте, так что это довольно просто, верно? Приклейте, а то я избавлюсь от нашей синевы; спасибо, синий.
Вот, мы применили этот градиент. Так что это простой способ, они в порядке, приятно видеть их на месте — я покажу вам пару мест, которые я получаю, мое вдохновение в целом для дизайна, для веб-дизайна, а также для цветов. Два места, которые я использую, я использую Dribbble; Dribbble с тремя B и Behance от Adobe. Я вхожу сюда, любой из них, они очень разные. По какой-то причине они выполняют одинаковую работу, но у них совершенно другой вид или тип пользователей. Таким образом, у них есть разные типы контента.
Я выполнил поиск градиента. Просто поднимите немного градиентов, но вы не обязаны, но, скажем, вы можете видеть, что мои ощущения от градиентов возникли именно из этого типа работы. Это изменится, если вы посмотрите в будущем и скажете: «Градиенты такие 2019, Дэн», убирайся отсюда. Это тоже нормально, пропустите все это видео, но скажем, вам нравится что-то из этого, и вы говорите: «О, я действительно хочу сделать что-нибудь с цветом», я просто прокручиваю, прокручиваю, где мы, просто выбираем то, что мне нравится.
Скажите, что вам нравятся некоторые из этих вещей в—
Я сейчас выберу одну, иди. Я выбираю этот, видишь этот апельсин и этот другой апельсин? Я хочу получить эти два цвета, и это трудно сделать. Если вы знаете Photoshop и Illustrator, вы легко справитесь. Сделайте скриншот, занесите его, используйте инструмент «Пипетка». Однако не у всех будут эти навыки, поэтому в Chrome есть несколько интересных вещей, где в браузере вы можете установить что-то, называемое расширением. Это действительно классный вариант, который называется FileZilla, но если вы перейдете к расширениям Chrome, просто выполните поиск расширений Chrome, а затем, пока вы там, найдите палитру цветов.
Палитра цветов — общее название всего этого. Найдите тот, который имеет высокую ценность, высокие отзывы, много загрузок, а затем скажите «Установить», и он просто появится в верхней части прямо здесь. Вы можете видеть мою палитру цветов, затем я просто выбираю «Палитра цветов», выбираю цвет на странице, а затем просто перемещаюсь, пока не.
.. вы видите здесь? Это трудно сделать, потому что моя мышка здесь внизу, а ты своими глазами смотри сюда. Так что смотрите, вот, я собираюсь выбрать его.
Потрясающе. И он просто добавляется вверху в мою палитру цветов, а также автоматически копируется в мой буфер обмена. Так что все, что мне нужно сделать сейчас, это войти сюда и сказать, удалить, вставить, упс, все, вставить. Так это тот самый апельсин. Я выберу случайный цвет, потому что если я выберу что-то близкое к этому розовому, это не будет хорошим примером, я просто выберу вот этот темно-зеленый. Нажмите на нее, давайте скопируем в буфер обмена, вставим. «Сохранить», давайте заглянем на наш сайт. Эй, круто. Не определился, но вы поняли идею, верно? Итак, Behance, просто хорошо для…
Пока вы здесь, с точки зрения моего, где я черпаю идеи для веб-дизайна, например, при создании тем для этого класса, мне пришлось построить поддельный магазин велосипедов. Откуда я черпаю идеи? Часто это набор пользовательского интерфейса или пользовательский интерфейс дизайна пользовательского интерфейса, часто это хорошее место для получения идей, цветов и схем, структуры.