Как добавить box-shadow в содержащий div? - PullRequest
Новая
       6

Как добавить box-shadow в содержащий div?

0 голосов
/ 27 апреля 2018

Так вот, где я нахожусь: https://codepen.io/YellaChevy/pen/odYxrg

Извините за мою разметку. Я супер новый, я пытаюсь понять, как добавить одно общее свойство box-shadow в "dogBlock" и "infoBlock"? Я чувствую, что это как-то связано с моей HTML-структурой, но я не уверен, как настроить ее так, чтобы она выглядела так: https://www.pages.xyz/

На сайте pages.xyz я вижу, что они содержат несколько элементов div, но имеют одну общую рамку-тень, имеет ли это смысл?

Заранее спасибо! 

<section>
<div class="container">

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_1.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_2.jpg"></a>
    </div>

    <div class="dogBlock">
        <a href="#"><img src="Assets/image_3.jpg"></a>
    </div>

</div>
<div class="container">

    <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
    </div>

    <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
    </div>

    <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
    </div>

</div>


 .container {
max-width: 1200px;
overflow: hidden;
margin: 0 auto;}

.boxShadow {
box-shadow: 0 10px 6px -6px rgba(255, 255, 255, 0.2);}


.dogBlock {
width:33.333%;
float: left;
margin-top: 80px;}

.infoBlock {
color:#000;
width:33.333%;
float:left;
background-color:rgba(236,236,236,1.00);
padding: 20px;
margin-bottom: 280px;}

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Вам нужно будет обернуть часть изображения и текст каждого элемента в отдельный div, чтобы получить результат, который вы ищете. Попробуйте этот код. 

<section>
    <div class="container">
        <div clss="boxwrap">
        <div class="dogBlock">
            <a href="#"><img src="Assets/image_1.jpg"></a>
      <div class="infoBlock">
        <h2>Sharpe</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Sharpe</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_2.jpg"></a>
      <div class="infoBlock">
        <h2>Bonnie, Mya + Roo</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet the sisters</a>
      </div>
        </div>

        <div class="dogBlock">
            <a href="#"><img src="Assets/image_3.jpg"></a>
      <div class="infoBlock">
        <h2>Willow</h2>
        <p>Lorem ipsum dolor sit amet, sir dolor em.</p>
        <a href="#">Meet Willow</a>
      </div>
        </div>
      <div class="clear"></div>
    </div>
    </div>
</section>

.container {
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
.boxwrap {
  margin-left: -15px;
  margin-right: -15px;
}


.dogBlock {
    width:calc(33.333% - 30px);
    float: left;
    margin-top: 80px;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.infoBlock {
    color:#000;
    background-color:rgba(236,236,236,1.00);
    padding: 20px;
    margin-bottom: 280px;
}
.clear {
  clear: both;
}
0 голосов
/ 27 апреля 2018

Добавьте это как 

   .container{
     max-width: 1200px;
     overflow: hidden;
     margin: 0 auto;
     -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
      box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Смотрите, если это работает.

...