Вогнутый прямоугольник с прозрачным градиентом
Мне нужна простая кнопка с цветовым градиентом и наложением прозрачного градиента, имитирующего световой блик. Раньше я создавал только кнопку с цветовым градиентом (от красного к темно-красному) и устанавливал слой с прозрачным градиентом (белый, с непрозрачностью от 0,25 до 0,50) поверх кнопки.
Нравится эта кнопка:
Но у меня большая проблема с вогнутой линией горизонта:
Я отметил это здесь теоретической строкой, просто для лучшего понимания.
Пробный код на скрипке:
Здесь я немного поэкспериментировал с вогнутыми настройками фона. Но тогда я не получаю прозрачной истории.
#wrapper {
background: grey;
padding: 25px;
}
#test {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 25px;
border-radius: 20px;
background: #888888;
background:
radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
background-size:200px 200px, 200px 200px;
background-position:0 0,0 0;
background-repeat:no-repeat;
}<div id = "wrapper">
<div id = "test">B1</div>
<div id = "test">B2</div>
</div>Но мои навыки CSS 2 полностью устарели. Отсюда вопрос, есть ли лучшее решение для моей финансовой кнопки.
У кого-нибудь есть идея, как я могу создать такую кнопку (например, красную на первой картинке)? Сейчас могут быть гораздо более современные и простые решения. - Важно, чтобы линия горизонта была вогнутой (сбоку вниз), а не выпуклой (эллипсом вниз посередине). Именно так, как показано на графике.
Мне приходится много работать с CSS-3 и новейшими технологиями, чтобы улучшить свои навыки.
Ответы 2
Вы можете добиться этого с помощью одного элемента и радиального градиента.
button {
width: 64px;
height: 64px;
border: 0;
border-radius: 3px;
background: radial-gradient(circle at 50% 150px, #B31609, #D5000C 69%, #DD3C3F 50%, #F0A696 100%);
}<button></button>Вы можете накладывать несколько градиентов один на другой. Я использовал прозрачный круговой радиальный градиент, чтобы затемнить кнопку с краем, а затем добавил линейный градиент под ним. Затем вы можете использовать пользовательские свойства CSS, чтобы установить цвет кнопки на любой вкус. Код ниже. Поиграйте со значениями непрозрачности в свойстве rgba(), чтобы получить нужный эффект.
Отредактировано, поскольку радиус не может быть процентным значением, я использовал пользовательское свойство, чтобы радиус кнопки масштабировался с размером кнопки, поэтому вы можете использовать кнопки разной ширины, и он будет нормально масштабироваться.
#wrapper {
background: grey;
padding: 25px;
}
.button {
display: inline-grid;
place-items:center;
--width:200px;
width: var(--width);
aspect-ratio:1/1;
margin-right: 25px;
border-radius: 20px;
--button-colour: blue;
background:
radial-gradient(
circle calc(var(--width) * 4) at 50% 270%,
transparent 50%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,1) 75%),
linear-gradient(
var(--button-colour),
var(--button-colour)
);
}
.red {
--button-colour:red;
}
.green {
--button-colour:green;
}
.blue {
--button-colour:blue;
}
.small {
--width:100px;
}<div id = "wrapper">
<div class='red button'>Red</div>
<div class='green button'>Green</div>
<div class='blue button'>Blue</div>
<div class='small blue button'>Blue</div>
</div>Ага, это тоже правильно. И мне нравится использовать переменные. И использование радиального и линейного градиента — очень чистое решение. Тем более, что его можно динамически уменьшать благодаря процентным значениям и кругу ... без необходимости корректировать позиции. Это потрясающе! Думаю, я буду использовать именно так. Спасибо Адам!
Хорош @Адам. Хорошее решение 😁
Привет Дэн. :-)
И очень важным является aspect-ratio:1/1;, которого я никогда раньше не видел в коробочном элементе, и он работает во всех современных браузерах. - Мне это очень нравится, и положение круга тоже. Я добавляю темный цвет для линейного градиента. Возможно, есть еще способ использовать filter: brightness(75%);, но он лучше работает со вторым цветом, поэтому я могу его настроить. Моя версия: jsfiddle.net/89bf3xd0/7
Выглядит неплохо. Я думаю, что у тебя лучший глаз на тени, чем у меня. Я уверен, что мои глазные яблоки были оснащены только графическим оборудованием EGA :-D
Это был год моего рождения, так что, возможно, я тоже вижу только 16 цветов. :P За 5 лет до этого я разрабатывал веб-бэкэнд C#-Core.NET, а иногда и внешний интерфейс. Но последние 5 лет я просто разрабатываю настольное программное обеспечение C# .NET со старым приложением Windows на основе форм для ERP. И именно поэтому я потерял фокус на технологиях внешнего интерфейса, таких как HTML, CSS, JS, ... Но теперь ChatGPT просыпается, поэтому я пытаюсь немного поиграть с некоторыми проектами-песочницами и содержимым ИИ. И у меня есть шанс вернуться к материалам в Интернете, снова. Если какой-то из этих проектов принесет прибыль, мне придется чаще бороться с CSS или JS. :)
@ Froschkoenig84 Моей первой работой после окончания колледжа было программирование физической системы для игрового движка, который работал на PS2, PSP, Wii и ПК. Как ни странно, я нахожу веб-разработку гораздо более удовлетворительной. Я до сих пор делаю игры на JavaScript для развлечения.
Прежде всего, спасибо Дэн. Вы совершенно правы, что собрали все цвета в один
radial-gradient(). Я немного изменился, но это уже очень хорошо: jsfiddle.net/89bf3xd0/6 - Так я узнал от Дэна, что могу добавлять столько цветов, сколько хочу, и указывать их положение. Таким образом можно было использовать третью и четвертую запись для градиента внизу. - Я надеюсь, что все остальные, у кого есть эта проблема, могут многому научиться из этого.