Как сделать градиентную обводку символов в css? / А точнее — как сделать прозрачной внутреннюю часть символа?
Делая по макету странницу столкнулся с этим: это даже не обводка — а оформление шрифта (обводка отсутствует). Задача — сделать такое в css
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 26 июн 2022 в 18:48
13 2 2 бронзовых знака
есть такой цвет transparent остальное сам)
26 июн 2022 в 19:01
Используйте svg .
26 июн 2022 в 19:59
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Пожалуйста! Вам осталось лишь поменять цвет градиента
body < font-family: Arial, Helvetica, sans-serif; background-image: url("https://img5.goodfon.ru/wallpaper/big/8/8b/linii-background-fon-geometriia.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; height: 100vh; justify-content: center; align-items: center; > Отслеживать
ответ дан 27 июн 2022 в 2:47
444 2 2 серебряных знака 5 5 бронзовых знаков
Этот пример тоже не работает
27 июн 2022 в 8:53
В Firefox форма цифр кривая
27 июн 2022 в 10:10
немного пошаманил и вроде работает, но сьезжают другие элементы в флекс-столбе, не понимаю по какой причине, вручную передвинуть тоже не получается
27 июн 2022 в 13:08
body < font-family: Arial, Helvetica, sans-serif; background-image: url(/img/1.jpg); display: flex; height: 100vh; justify-content: center; align-items: center; >.transpText
Отслеживать
4,366 2 2 золотых знака 5 5 серебряных знаков 22 22 бронзовых знака
ответ дан 26 июн 2022 в 23:08
444 2 2 серебряных знака 5 5 бронзовых знаков
Тут нету градиента же
27 июн 2022 в 0:36
В CSS это не получится сделать , я написал для вас SVG, смотрите последний комментарий
27 июн 2022 в 2:46
- css
- svg
- текст
- градиент
- оформление
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как создать блок с градиентной обводкой?
Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного 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
Лицо, которое вы видите чаще, чем своего кота, актер в @go.freelance
Копирайтер, гений творческой мысли и чудный мастер капкейков в @go.freelance
Maria Achne
Креативный дизайнер, motion дизайнер и визуализатор в @go.freelance
Max Andreev
Продуктовый дизайнер, бренд-менеджер и креативный директор @go.freelance
Alina Semenova
Градиентная обводка элементов в Тильда
Градиентная обводка для шейпа и каринки в Zero блоке
1. Добавляем элементу класс .gborder
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления шейпа
.gborder .tn-atom < position: relative; >.gborder .tn-atom::before
Градиентная обводка для кнопки в Zero блоке
1. Добавляем элементу класс .gbtn
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления кнопки
.gbtn .tn-atom < position: relative; >.gbtn .tn-atom::before
Градиентная обводка блока на CSS
Создание современных сайтов сопровождается использованием анимаций, как для отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только CSS?
Рассмотрим пару вариантов градиентных обводок.
1. Прямоугольная обводка с острыми углами
1. Создадим div.linear-gradient с градиентным фоном;
2. Создадим внутренний блок div с небольшим отступом.
Разметка HTML
div class="module-border-wrap">
div class="module">
Современные технологии достигли такого уровня,
что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов.
Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
div>
div>
Стили CSS
.module-border-wrap max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
>
.module background: #222;
color: white;
padding: 2rem;
>Результат
Современные технологии достигли такого уровня, что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after
Разметка HTML
div class="gradient-box">
p>
Современные технологии достигли такого уровня, что сплоченность команды профессионалов
прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети
интернет объединены в целые кластеры себе подобных.
p>
div>Стили CSS
.gradient-box < display: flex; align-items: center; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 3em; box-sizing: border-box; color: #FFF; background: #000; background-clip: padding-box; /* !important */ border: solid 5px transparent; /* !important */ border-radius: 1em; >
.gradient-box:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >
.gradient-box:after < content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); background: #000; >
p
Результат
Сложно сказать, почему активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть обнародованы. Учитывая ключевые сценарии поведения, реализация намеченных плановых заданий не оставляет шанса для направлений прогрессивного развития. В рамках спецификации современных стандартов, непосредственные участники технического прогресса ограничены исключительно образом мышления.