Эффект тени CSS отображается неправильно
Я создаю кнопку с эффектом тени (неоморфизм), но когда я применяю свой CSS к кнопке, она просто отображается как двухцветная сплошная кнопка... Какую часть CSS я использую неправильно? Являются ли мои значения тени неправильными относительно размера кнопки? Изменение ширины и высоты не помогает.
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 35px;
}
.buysellbutton {
width: 44px;
height: 44px;
background: #F0F0F3;
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
border-radius: 16px;
}<div class = "css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class = "buysellbutton">buy</button>
</div>Сначала я подумал, что это может быть проблема поддержки браузера или что-то связанное с вложенным в него div и его свойствами.
Вы имеете в виду, что вам не нужна рамка вокруг кнопки? Установите его на none, тогда к кнопке будет применен стиль по умолчанию из внутренней таблицы стилей браузера. Также box-shadow должен быть разбросом длины, % здесь не сработает.
Я хочу эффект тени, но CSS, который у меня есть, приводит к «границе» с двумя разными цветами, которые я назначил для двух разных эффектов тени, и я пытаюсь решить эту проблему. Избавление от знака % действительно помогло! но я все еще получаю эффект. Должен ли я прикрепить фотографию желаемого результата, чтобы сравнить его с ?
Вы хотите это jsfiddle.net/axL8odku ?
Да! это то что я хотел спасибо за помощь!
Ответы 2
чтобы удалить черную рамку с кнопки, просто добавьте broder-style:none к кнопке. Добавлена еще одна кнопка с наведением и активным стилем.
для создания эффекта Неоморфизма вы можете проверить https://neumorphism.io/
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 15px;
padding: 10px;
}
.buysellbutton {
width: 80px;
height: 44px;
border-style:none;
border-radius: 16px;
background: #F0F0F3;
box-shadow: 18px 18px 36px #c5c5c7,
-18px -18px 36px #ffffff;
outline:none;
}
.button {
width: 150px;
height: 50px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
outline: none;
border-style: none;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
span {
font-size: 25px;
font-weight: semibold;
}
.button:hover {
opacity: 0.7;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
.button:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}<div class = "css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class = "buysellbutton">buy</button>
<button class = "button"><span>Buy</span></button>
</div>Эй, спасибо! Я попробовал этот сайт, и у меня все еще были проблемы, спасибо за помощь, теперь я вижу, как он работает!
Во-первых, используйте приведенный ниже код в верхней части всех CSS
button{
all: unset;
}
и вместо
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
использовать
box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
Он имеет тот же точный эффект с рамкой и той же толщиной, просто в увеличенном масштабе.. хм