Есть ли способ в CSS3 создать кросс-браузер (т.е.: Mozilla, Webkit и Opera) вставить тень окна, которая будет переходить с черного на верхний на белый внизу? Самый близкий способ, который я нашел для этого, позволяет только внешнему тенью быть одним цветом, затем перейти на другой цвет внутри, на этой странице: http://www.css3.info/preview/box-shadow/
CSS3 Box-Shadow Linear Gradient?
Ответ 1
К сожалению, это невозможно. Я предлагаю просто использовать div с фоновым изображением, которое вы создаете в Photoshop или аналогичным образом.
Ответ 2
Посмотрите это видео Lea Verou. Раздел, который я связал с разговорами о чем-то очень похожим, где вы используете градиенты фонового изображения, чтобы сделать что-то вроде тени-коробки. Если я смогу найти хороший рабочий пример, я отправлю ответ, но это должно дать вам хорошее место для начала. Вы также можете сделать некоторые действительно классные вещи, например, скруглить тень окна с псевдо-классом :after
, чтобы создать тень.
Вот несколько простых примеров в верхней и нижней части окна и подчеркивание некоторого текста. Вам придется поиграть с ним (возможно, много), чтобы посмотреть, как вы хотите, но у css есть некоторые действительно удивительные функции (и их будет больше).
body {
display: flex;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
.container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(at 50% 0, black, transparent 70%),
linear-gradient(0deg, black, transparent 50%) bottom;
background-size: 100% 15px;
background-repeat: no-repeat;
}
.underline {
width: 6em;
text-align:center;
font-size:30px;
}
.underline:after {
content: '\00a0';
background-image:
radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
background-size: 100% 2px;
background-repeat: no-repeat;
float:left;
width:100%;
}
<div class="container">
<div class="underline">Hello, world!</div>
</div>
Ответ 3
Попробуйте использовать элемент: before, чтобы установить "тень" вверх.
.classname {
&:before {
content: '';
position: absolute;
display: none;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background: linear-gradient(to bottom, red, blue);
}
&:hover {
&:before {
display: inline-block;
}
}
}
Этот вышеприведенный код является примером того, как настроить такой эффект наведения.
Ответ 4
Поздно на вечеринку, но, возможно, кто-то найдет это полезным! На самом деле вы можете сделать это с несколькими тенями на box-shadow:
box-shadow: inset 0px 33px 25px 0 #000,
inset 0 66px 15px 0px #ccc,
inset 0 99px 5px 0px #fff;
пример codepen: https://codepen.io/InFecT3D/pen/JQdmeL
Примечание: это может быть немного "хакерский" подход, но в некоторых случаях это помогает.
Ответ 5
Необходимо два div:
1: с линейным градиентом + размытие:
.gr{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );
filter:blur(10px);
height:200px;
}
2: над другим, содержание.
.zz {background:#fff; position: relative; top:-200px;
height:200px;
}
Затем:
<div class='gr'></div>
<div class='zz'>BOX</div>
Ответ 6
Если целью является создание полупрозрачного наложения поверх фонового изображения, то это может быть достигнуто с помощью следующего правила стиля без box-shadow
.
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(255, 255, 255, 0.5)),
url("background.png");
Смотрите background-image
в MDN.