ヘッダー下部へbox shadowをつける方法

Simplicityの特徴 フォーラム Simplicityについての質問 ヘッダー下部へbox shadowをつける方法

このトピックには3件の返信が含まれ、1人の参加者がいます。5 ヶ月、 1 週前 dreams さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #51910

    WPBG

    いつもzinmplicity使わせていただいております。
    今回、ヘッダー下部にbox shadowをつけようと思いいじってたのですが、うまくいきません。
    simplicityの場合、どのようにすれば実装できるのでしょうか?

    ちなみに、
    box shadow: 2px 2px 10px 5px rgba(0,0,0,.5)
    で実装するつもりです。

    よろしくお願いいたします。

  • #51916

    Hidekichi

    質問のcssは、間違っているわけではないですよ。

    box-shadowは要素の後ろに付くので、要素自体を前面に出すか要素の下に隙間を開けるかなどが必要かと思います。

    デベロッパーツールを開いて、このページの#headerに、

    #header {
      box-shadow: 2px 2px 10px rgba(0,0,0,.5);
      margin-bottom: 20px;
    }

    を追加してみて下さい。要素を前面に出す場合は、position: relative等を追加した後、z-indexで1以上で10程度の値を入れて試してみて下さい。もっと大きくてもOKです。

  • #51923

    dreams

    Hidekichiさん、ご回答ありがとうございます!
    試してみたところ、うまくヘッダーに影をつけることができました!

  • #51924

    dreams

    上記のコメントで名前が違ってしまいましたが、回答者本人です。
    ありがとうございました!

トピック「ヘッダー下部へbox shadowをつける方法」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)