Q&A
そもそもheaderにclass付けするのは間違いでは？
前提
ホームページを作成中で、ヘッダの周りに影をつけたい。
発生している問題・エラーメッセージ
何もしない時、影がつかない。少しズームすればつく。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <meta name="description" content="わぁ！"> 8 <link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet"> 10 <link rel="stylesheet" href="Style.css"> 11 </head> 12 13 <body> 14 <header class="fadedown"> 15 <h3 class="header-title"> 16 ぱわ 17 </h3> 18 </header> 19 </body> 20 21</html>
CSS(Style.css)
1body { 2 margin: 0; 3} 4 5header { 6 box-sizing: border-box; 7 filter: drop-shadow(0px 5px 10px #000); 8 display: flex; 9 align-items: center; 10 font-family: "Nikukyu"; 11 padding: 1vw; 12 width: 100%; 13 height: 10vh; 14 background: #98fd98; 15} 16 17.fadedown { 18 animation: fadedownAnime 1s forwards; 19} 20 21@keyframes fadedownAnime { 22 0% { 23 transform: translate(0, -15vw); 24 opacity: 0; 25 } 26 27 100% { 28 transform: translate(0, 0); 29 opacity: 1; 30 } 31}
補足情報
ipadでやってます。
CSSアニメーションで動いてる間はついているよう。
transformが原因？
テスト
なぜ？
一応ネット上を調べましたが、そのような記述はありませんでした。
drop-shadow ではなく box-shadow でしたらどうでしょう。
drop-shadow: 0px 5px 10px #000;
やっぱりそうするのが一番ですかね。わかりました。
ちなみに、filter: drop-shadowは、アルファチャンネルに対して影をつけれる手法となりますので、
矩形に影をつけるなら、box-shadowで十分ですね。
たしかにそうですね！けどちょっと興味があって使ってみたかったんです！
回答1件
0
ベストアンサー
諦めてbox-shadowでやります…
投稿2022/09/23 04:18
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
