css — Можно ли сделать градиент только на левой границе?
Можно ли сделать градиент только на левой границе в CSS3, и если да, то как? Я знаю, что мы можем делать градиентные фоны, и для этого есть много генераторов, но я не могу найти ни одного, который создает код для градиентной границы только для левой границы.
У вас есть идеи, как это сделать?
С уважением, Шив
- css
- граница
- градиент
border-image позволяет определить изображение для границы, изображение может быть linear-gradient()
Свойство CSS border-image рисует изображение вокруг заданного элемента. Он заменяет обычную границу элемента.
MDN — border-image
border-image является сокращением для всех этих свойств:
- border-image-outset
- граница-изображение-повтор
- граница-изображение-срез
- граница-изображение-источник
- ширина границы изображения
Благодаря border-image-slice вы можете применить свой градиент только к левой границе.
Свойство CSS border-image-slice делит изображение, указанное в параметре border-image-source, на области. Эти области образуют компоненты изображения границы элемента.
MDN — border-image-slice
Документация MDN дает отличное объяснение того, как использовать border-image-slice , но если вы хотите, чтобы ваш градиент применялся только слева, просто добавьте значение 0 0 0 1 к border-image-slice .
заголовок {
максимальная ширина: 40ч;
набивка: 1рем;
ширина границы: 2px;
стиль границы: сплошной;
граница-изображение:
линейный градиент (
на дно,
красный,
прозрачный
) 0 0 0 1;
} <заголовок> Lorem ipsum dolor sit amet consectetur adipiscing elit
Пожалуйста, попробуйте следующий код:
#lftGrad{
ширина: 200 пикселей; высота: 200 пикселей; левая граница: 10 пикселей сплошная #ccc; фон: #ddd;
border-image:gradient(linear, слева вверху, слева внизу, от(#ff00ff), до(#ffff00)) 0 10 0 10 повтор повтора;
-webkit-border-image: -webkit-gradient(linear, слева вверху, слева внизу, от(#ff00ff), до(#ffff00)) 0 10 0 10 повторение повторения;
} <дел>
Зарегистрируйтесь или войдите в систему
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Анимация границы градиента CSS — Bram.
us Недавно Стефани Эклс призвала возобновить использование CSS border-image . Не для того, чтобы использовать его с изображениями, что требует довольно неприятного синтаксиса, а для создания градиентных границ в CSS.
🎉 Время оживить старое свойство CSS!
Когда было объявлено о `border-image`, я был сбит с толку, потому что синтаксис был таким диким.
Но в современных браузерах это *самый простой* способ создания градиентных границ.
Узнайте больше о границах CSS в новом руководстве по ModernCSS: https://t.co/W7YVS7f0Jp pic.twitter.com/nj6WSmBplC
— Стефани Эклз (@5t3ph) 11 декабря 2020 г.
Любопытно посмотреть, что мы можем с ними сделать, и я сделал несколько демонстраций с помощью CodePen.
~
Самое простое использование — установить некоторый тип градиента CSS в качестве border-image :
div {
граница: сплошная 3em;
изображение границы: линейный градиент (вправо, зеленый, желтый) 1;
} См.
Потом я подумал, можно ли анимировать границу, чтобы она вращалась вдоль края.
~
Чтобы анимировать градиент границы, вам нужно добавить туда угол — с помощью пользовательского свойства — которое вы анимируете, используя около @ключевые кадры .
раздел {
--угол: 0 градусов;
/* … */
border-image: linear-gradient(var(--angle), green, yellow) 1;
анимация: 10s вращаются линейно бесконечно;
}
@ключевые кадры вращаются {
к {
--угол: 360 градусов;
}
} С помощью пользовательского свойства мы можем заставить браузер правильно автоматически интерполировать это значение от 360 градусов вместо необходимости добавлять отдельные ключевые кадры для каждого увеличения на 1 градус. Чтобы это работало, мы должны зарегистрировать пользовательское свойство, используя удивительный @property правило
@property --angle {
синтаксис: '<угол>';
начальное значение: 0 градусов;
наследует: ложь;
} ⚠️ Поскольку @property на момент написания статьи поддерживается только в Chromium, демоверсии с этого момента будут работать только в браузерах на его основе (например, Google Chrome, Microsoft Edge, …).
Для браузеров, которые не поддерживают это, вы можете добавить отдельные ключевые кадры для каждого шага, как показано в этой демонстрации. Однако в демонстрационных целях я не включаю дополнительный код ни в одну из приведенных ниже демонстраций.
См. градиентную рамку Pen CSS (анимированную) от Bramus (@bramus) на CodePen.
~
Хотя эффект здесь выглядит довольно хорошо, он не будет хорошо работать с более чем двумя цветами. Возьмем, к примеру, эту радужную анимированную градиентную рамку:
См. Радужную градиентную рамку Pen CSS (анимация, попытка 1) от Bramus (@bramus) на CodePen.
🕵️♂️ Вы можете лучше всего видеть, что происходит, переключая опцию заполнения там… тьфу, это не то, что нам нужно!
Чтобы исправить это, я сначала подумал об использовании радиального градиента, но мне нужен конический градиент:
Таким образом, каждый цвет градиента будет плавно переходить в границу, что приведет к правильной анимации.
раздел {
/* … */
border-image: конический градиент (от var (--angle), красный, желтый, лайм, цвет морской волны, синий, пурпурный, красный) 1;
} 💁♂️ Чтобы конец градиента хорошо сочетался с его начальным цветом, мы должны повторить указанный цвет — например, красный — как последняя запись.
См. Радужную рамку градиента Pen CSS (анимированную) от Bramus (@bramus) на CodePen.
При переключении заливки вы можете видеть, что
🎩 Для браузеров, отличных от Houdini, вы можете проверить этот форк, который использует отдельные ключевые кадры для анимации градиента.
