Как можно сверстать градиентный бордер на градиентном фоне?
Нужна вот такая кнопка:
Кто-то сталкивался с подобным? Градиентный фон + градиентный бордер.
Что пытался юзать: box-shadow, border-image-source. Никак не получается :(
Что предлагает фигма:
border: 1px solid; border-image-source: linear-gradient(167.1deg, rgba(176, 149, 255, 0) 1.06%, rgba(176, 149, 255, 0.92) 92.98%); |
border: 1px solid; border-image-source: linear-gradient(167.1deg, rgba(176, 149, 255, 0) 1.06%, rgba(176, 149, 255, 0.92) 92.98%);
Дополнительно:
Всё возможно.
Например, так
snippet
Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску
- Спасибо большое, так и знал что решение есть :)
- не под сафари
- не понимает rem в rx, ry. нужна замена на px или на численное значение
Ответы:
Прозрачность использовать нельзя, подбирайте цвет без использования прозрачности
snippet
- Спасибо, это мне подходит, но хотелось бы всё-таки понять как можно было бы реализовать с прозрачностью
- Andrey Vasilev, с прозрачностью вы получите всякого рода нерешаемые эффекты
- modelair, есть ведь какая-то альтернатива? Не хочется вставлять картинкой обычную кнопку. Ну вот так вот задумано по дизайну. Если ни к чему не приду - постараюсь объяснить заказчику что такое в принципе не реализовать.
- Andrey Vasilev, я хотел себе такие, перебрал разные варианты. box-shadow, filter с dropshadow, псевдо. оно как бы работает, но с прозрачностью начинаются косяки, решения которым ни своими силами, ни в инете я не нашел. отказался от бордера.
а без прозрачности варианты отлично смотрятся ) - возможно вот Ankhena что-то подскажет :)
- modelair, https://qna.habr.com/q/1156102
Попробуй варианты отсюда
на псведо элементах фоном сделай такой же блок закруглённый с градиентом(как варик)
- делал, из-за прозрачности обоих - накладываются друг на друга :(
- Andrey Vasilev, вон там чел выше написал что я хотел сказать)) то что не надо юзать прозрачность, в принципе это как раз что я имел ввиду у него, если можешь отметь мой ответ трушным тоже пажалста)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания градиентного бордера на градиентном фоне вам понадобится использовать CSS. Давайте рассмотрим пример для создания градиентного бордера вокруг элемента на градиентном фоне:
```html
.container {
width: 200px;
height: 200px;
background: linear-gradient(to right, #FFC107, #FF5722);
border: 5px solid;
border-image: linear-gradient(to right, #E91E63, #9C27B0) 1;
}
```
В данном примере мы создали блок с классом "container" и применили к нему градиентный фон с помощью свойства `background`. Затем мы добавили градиентный бордер с помощью свойств `border` и `border-image`.
Свойство `border` задает толщину и тип рамки элемента, а свойство `border-image` позволяет использовать градиент в качестве бордера. Мы указали градиент для бордера с помощью линейного градиента от цвета #E91E63 к #9C27B0.
Таким образом, вы можете создать градиентный бордер на градиентном фоне, используя CSS. Надеюсь, это поможет вам решить вашу проблему!