実現したいこと
カードの全方向に影をつけたいが、左右はつくが上と下にのみ影がつかない。
カードの高さの指定を除くと下にも影がついたが、高さは維持したい。
指定の条件は
.swiper-slide に
width: 264px;
height: 331px;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
をつけることです。
これで見ていただくとわかりやすいかと思います。
saya-hands.conohawing.com/tateshina-goto-farm
ユーザー名、パスともにuser-111です。
前提
該当のソースコード
HTML
1<section id="product" class="product _cream-bg"> 2 <div class="product-inner element"> 3 <h2 class="section__ttl section__ttl_90">製品一覧</h2><!-- /.section__ttl --> 4 5 <!-- Slider main container --> 6 <div class="swiper"> 7 <!-- Additional required wrapper --> 8 <div class="swiper-wrapper element"> 9 <!-- Slides --> 10 <article class="swiper-slide element"> 11 <figure><img src="img/brussels-sprouts.jpg" alt=""></figure> 12 <h3 class="swiper-slide__textbox-heading"> 13 標高1,000mオーバーの蓼科高原だからこその、あまあま芽キャベツ!! 1kg</h3> 14 <!-- /.swiper-slide__textbox-heading --> 15 <p class="swiper-slide__textbox-desk">¥ 4,200(税込)</p> 16 <!-- /.swiper-slide__textbox-desk --> 17 18 </article> 19 <article class="swiper-slide element"> 20 <figure><img src="img/strawberries.jpg" alt=""></figure> 21 22 <h3 class="swiper-slide__textbox-heading"> 23 「あいまりん」「サマープリンセス」「サマーリリカル」「よつぼし」など詰め合わせ10パック</h3> 24 <!-- /.swiper-slide__textbox-heading --> 25 <p class="swiper-slide__textbox-desk">¥ 4,800(税込)</p> 26 <!-- /.swiper-slide__textbox-desk --> 27 28 </article> 29 <article class="swiper-slide element"> 30 <figure><img src="img/grapes.jpg" alt=""></figure> 31 32 <h3 class="swiper-slide__textbox-heading"> 33 蓼科ごとう農園オリジナル品種の「シャインマスカット」と「ナガノパープル」500g</h3> 34 <!-- /.swiper-slide__textbox-heading --> 35 <p class="swiper-slide__textbox-desk">¥ 7,700(税込)</p> 36 <!-- /.swiper-slide__textbox-desk --> 37 38 </article> 39 40 </div> 41 42 </div><!-- /.swiper --> 43 </div><!-- /.product-inner --> 44 </section><!-- /.product -->
SCSS
1.product-inner { 2 padding-bottom: 90px; 3} 4 5.swiper { 6 7 overflow: hidden; 8} 9 10.swiper-wrapper { 11 display: flex; 12} 13 14.swiper-slide { 15 &:not(.swiper-slide-visible) { 16 .slide { 17 pointer-events: none; 18 opacity: .3; 19 } 20 } 21} 22 23.swiper-slide { 24 width: 264px; 25 height: 331px; 26 background: #fff; 27 box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16); 28 overflow: hidden; 29 display: flex; 30 flex-direction: column; 31 flex-shrink: 0; 32 33 figure { 34 img { 35 width: 264px; 36 height: 166px; 37 display: block; 38 object-fit: cover; 39 width: 100%; 40 } 41 } 42 43} 44 45 46 47 48.swiper-slide__textbox-heading { 49 font-size: 16px; 50 font-weight: 700; 51 padding: 16px 16px 0 16px; 52 line-height: 1.5; 53} 54 55.swiper-slide__textbox-desk { 56 font-size: 16px; 57 font-weight: 400; 58 margin-top: auto; 59 padding: 0 16px 16px 16px; 60 61}
試したこと
ネットで調べましたが、よくわかりませんでした。
.swiper-slide__textbox-desk に影をつけようとしたけどうまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

回答1件
あなたの回答
tips
プレビュー