Как я могу создать эффект тени, как показано ниже, с помощью чистого CSS?
Я новичок в CSS. Вот что я пробовал до сих пор, но я не могу приблизиться к тому, что хочу. Пожалуйста, сообщите, как я могу сделать его похожим на тень на изображении? Спасибо!
box-shadow: 1px 1px 5px #999999 inset
Это самое близкое, что я мог бы получить: Демо. Я думаю, это действительно неплохо.
Он сочетает в себе черную тень и белый поверх нее.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Сглаживание теней браузеров может отличаться. Я использую хром, чтобы вы могли tweek значения, чтобы получить визуальный эффект кросс-браузера...
Прочитайте статью статьи CSS Tricks о тенях теней, чтобы узнать, как они используются.
Для двух теней (с обеих сторон) вам нужно 4 тени (demo):
Результат:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Остерегайтесь, рендеринг/сглаживание теней браузеров может сильно различаться. Я использую хром, чтобы вы могли tweek значения, чтобы получить визуальный эффект кросс-браузера...
Подробнее о css-тенях читайте в этой статье из CSS-трюки
То, что вы хотите, в основном является противоположностью теневой завитки страницы. Взгляните на этот учебник - вы должны легко его адаптировать.
Вот пример: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
Вставляем псевдоэлемент, позиционируем его ниже нашего div и заставляем его бросать тень. Таким образом, вы контролируете высоту и положение теней.