CSS поднял углы в фундамент 6 - PullRequest
Новая
       11

CSS поднял углы в фундамент 6

0 голосов
/ 11 декабря 2018

Я пытался использовать CSS для создания эффекта поднятого угла для изображения на веб-сайте Foundation 6 (текучая среда), и мне не удалось заставить его работать.Я всегда ничего не получаю.Изменение свойства z-index ничего не делает.Я предполагаю, что что-то в фундаменте может мешать, но я новичок в Foundation.

В идеале я хотел бы иметь один класс, который я мог бы применить к любому изображению любого размера.

CSS 

.shadowbox {
  position: relative;
}
.shadowbox:before, .shadowbox:after {
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML: 

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">
            <img src="assets/img/feature_img/stem_design.jpg" />
        </div>
        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
</div>

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Псевдоэлементам :before и :after требуется свойство content для отображения на экране.

Добавьте content: ''; внутри вашего .shadowbox:before, .shadowbox:after { } и затем он должен отобразиться.

Подробнее об этом здесь: Почему для псевдоэлементов: before и: after требуется свойство 'content'?

0 голосов
/ 11 декабря 2018

У вас есть ряд проблем.Во-первых, основной столбец такой большой, что он выталкивает: before и: after со страницы.

У меня не было вашего изображения.Но текст, вероятно, также должен быть в .shadowbox.

Мы хотим немного уменьшить размер .shadowbox так, чтобы: After и: before (с шириной 50%) могли уместиться.Я уменьшил их ширину. 

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">


        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
        </div>
</div>

Начнем с чего-то более простого. 

.shadowbox {
  position: relative;
  width:50%;
}
.shadowbox:before, .shadowbox:after {
  content:'';
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 25%;
  top: 80%;
    box-shadow:0 20px 15px #777;
    transform:rotate(-5deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

https://jsfiddle.net/61atov8w/2/#&togetherjs=oyEsIjJwpM

...