Тень макета каменной кладки обрезается
Я создаю макет кладки с тенью. Но, к сожалению, тень обрезается, как показано ниже. Я знаю, что это исправит добавление нижнего отступа, но содержимое этой карты может время от времени меняться, тогда высота будет меняться в зависимости от содержимого. Таким образом, проблема здесь нуждалась в чистом методе CSS, чтобы избавиться от обрезки снизу при любой высоте и размере контента.
Спасибо
.masonry-cascading-grid-layout {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
padding-bottom: 120px;
.masonry-wrap{
padding-bottom: 120px;
}
}
.item-masonry {
display: inline-block;
padding: 0em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0px 30px 60px -30px #757287, 0px 10px 100px -20px rgba(0,0,0,.25);//shadow
border-radius: 5px;
}
.masonry-cascading-grid-layout {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}<div class = "masonry-cascading-grid-layout">
<div class = "masonry-wrap">
<div class = "item-masonry">
<h3 class = "title">Item 1</h3>
<div class = "content"><p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p></div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 2</h3>
<div class = "content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 3</h3>
<div class = "content"><p>No</p></div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 4</h3>
<div class = "content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p></div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 5</h3>
<div class = "content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
</div>
</div>
</div>Я думаю, что это отступ на дне контейнера, просто добавьте больше отступов, чтобы он мог показать тень, я считаю, что это также ответы Имрана;) так что большие пальцы вверх.
вы слишком сильно распространяете тень окна. Я думаю, вам нужно уменьшить ширину распространения тени, а во-вторых, ваша первая тень окна перекрывается с ближайшим полем, поэтому, если вы хотите иметь такую же ширину распространения тени, вам нужно увеличить ширина желоба тоже. он выглядит слишком усталым.
@Rmaxx: Привет :) Я не использовал отступы, так как спрашивающий не хочет их использовать. Я как бы наложил div на обрезанный край родителя и добавил к нему blur() и box-shdow. Это моя идея, чтобы справиться с этим. Будь счастлив, дружище :)
@Isuru Dilshan: обновил мой ответ в соответствии с вашим требованием. Он намного мягче, чем предыдущий. Наслаждайтесь кодированием и не забудьте принять мой ответ. Это поможет другим разработчикам, столкнувшимся с той же проблемой :)
Ответы 2
Причина такого отсечения box-shadow заключается в том, что родительский элемент.
Я придумал исправление для этого, наконец:
ОБНОВЛЯТЬ:
Наслаждайтесь приведенным ниже кодом:
body {
padding: 3rem 0;
}
.masonry-cascading-grid-layout {
margin: 1.5em 0;
padding: 0;
column-gap: 1.5em;
position: relative;
}
.item-masonry {
display: inline-block;
padding: 0em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
z-index: -1;
box-shadow: 0px 30px 60px -30px #757287,
0px 10px 100px -10px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
.masonry-cascading-grid-layout {
column-count: 2;
}
.quick-fix {
height: 10px;
width: 51%;
position: absolute;
bottom: -0.5rem;
left: -0.5rem;
z-index: 1;
background: #ccc;
box-shadow: 0px 0px 28px 28px #ccc;
filter: blur(8px);
}<html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1" />
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<div class = "masonry-cascading-grid-layout">
<div class = "masonry-wrap">
<div class = "item-masonry">
<h3 class = "title">Item 1</h3>
<div class = "content">
<p>
Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae
ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor
volutpat, at maximus justo pharetra. Donec eros tellus,
scelerisque at mauris non, mollis mollis velit.
<br /><br />
Praesent fringilla orci vitae ligula ultrices finibus a id risus.
Praesent sed quam pharetra, pulvinar diam iaculis, condimentum
eros. Duis accumsan rutrum aliquam. Donec id quam odio.
Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum
sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Suspendisse porttitor dapibus vehicula. Vivamus
scelerisque metus lectus, vel cursus nibh pretium in.
</p>
</div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 2</h3>
<div class = "content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.
</p>
</div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 3</h3>
<div class = "content"><p>No</p></div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 4</h3>
<div class = "content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.<br />Ut id cursus ligula, sit amet pharetra nisi.
Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam
convallis nibh a tortor volutpat, at maximus justo pharetra. Donec
eros tellus, scelerisque at mauris non, mollis mollis velit.
</p>
</div>
</div>
<div class = "item-masonry">
<h3 class = "title">Item 5</h3>
<div class = "content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.
</p>
</div>
</div>
</div>
<!-- Fix to bottom clipper -->
<div class = "quick-fix"></div>
</div>
</body>
<!-- <script src = "./script.js"></script> -->
</html>Привет Имран. Спасибо за ваше обязательство и ответ, это сложно.
Дорогой Исуру, ради этого я не спал всю ночь. Мне пришлось придумать решение для этого, потому что эта проблема возникает много раз. Я также заметил, что в начале родительского div есть такое же отсечение, которое вы, возможно, тоже заметили. Мы можем использовать тот же трюк и для этого. нам просто нужно использовать top:-3px; слева:0; для этого див. Пожалуйста, примите ответ и оцените. Другие разработчики тоже выиграют от этого :) Спасибо
О, чувак, извини. Я не думаю, что это решение. Потому что это относится к обоим столбцам. Лево и право. Но я дам знаки награды. Потому что вы единственный человек, который пытается это сделать. Если вы можете исправить это только для применения в левой колонке и приклеивания внизу, я приму. (потому что отсечение происходит только с левой стороны этого макета) Я много пытаюсь, но, к сожалению, я недостаточно умен, чтобы исправить это. Если у вас есть время, попробуйте. Это будет хорошо для вас. Спасибо, Имран.
Это легко, друг мой, я изначально сделал эту часть :) Позвольте мне помочь вам с этим. И один этот. Ты замечательный человек, Умный ты или нет, это другое дело. Просто иногда идея не удавалась. Позвольте мне сделать это для вас, мой друг. Позвольте мне проверить код еще раз. И на самом деле есть лучшее решение для этого в целом, используя кладку CSS-Grid. Тогда и подход к делу будет совсем другим. Но давайте исправим это сейчас
Обновлено в соответствии с последним изменением, дорогой друг :) Он работает только на половине сторон на всех размерах экрана :) Примите ответ и оцените. Спасибо
Спасибо за вашу поддержку Имран. Но я нашел свое собственное решение, которое мне кажется лучше.
Здорово, что у вас есть лучшее решение сейчас. Я действительно думал, что вам нужно сделать это только так. В противном случае CSS-Grid Masonry значительно упрощает жизнь. В любом случае рад за вашего друга :) Благослови вас Бог
Бог благословит вас тоже
Итак, я решил сделать это снова с собой. Я не могу принять ответ Имрана, потому что это сложно, но не является хорошей практикой кода. (Спасибо за вашу поддержку, Имран, но я начинаю с нуля, чтобы построить это снова.)
Я нашел хорошую статью (https://tobiasahlin.com/blog/masonry-with-css/), написанную Тобиасом Ахлином Бьерромом, и она дает все необходимые мне знания. Измените display: inline-block; на flex и удалите внешнюю оболочку, чтобы решить проблему. Теперь он выглядит чище и меньше😉
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
height: 1000px;
counter-reset: items;
padding-top: 50px;
}
.item {
width: 49%;
margin-bottom: 2%;
padding: 15px;
box-sizing: border-box;
box-shadow: 0px 30px 60px -30px #757287,
0px 10px 100px -20px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
.item {
width: 100%;
}
.container {
display: block;
height: 100%;
}
}<div class = "container">
<div class = "item">
<h3 class = "title">Item 1</h3>
<div class = "content">
<p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p>
</div>
</div>
<div class = "item">
<h3 class = "title">Item 2</h3>
<div class = "content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
</div>
</div>
<div class = "item">
<h3 class = "title">Item 3</h3>
<div class = "content">
<p>No</p>
</div>
</div>
<div class = "item">
<h3 class = "title">Item 4</h3>
<div class = "content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p>
</div>
</div>
<div class = "item">
<h3 class = "title">Item 5</h3>
<div class = "content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
</div>
</div>
</div>
Эта проблема заняла у меня много времени, чтобы найти решение. Я много гуглил, чтобы найти все необходимые свойства, которые, наконец, помогли мне добиться этого. Хотя это было сложно. Возможно, позже вам потребуются небольшие изменения, но вам нужно будет только решить, какой div оставить как position:relative; вот и все. Оцените и примите ответ. И счастливого вам кодирования :). Этот вопрос имеет награду. Я тоже сегодня горжусь. Мой первый ответ с наградой. Оставайтесь благословенными. Господи, благослови кодеров :)