Add shadow to header

Home Forums Main Forum General Topics Add shadow to header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #14972
    Prisca
    Participant

    Hello

    Would you have a suggestion to add a shadow to header and banner of something is there – between the bottom of header/banner and content?

    Something like (attached) without the wavy thingy

    Thank you so much 🙂
    shadow.jpg

    Attachments:
    You must be logged in to view attached files.
    #19613
    Sushil Adhikari
    Moderator

    You can add a shadow to almost anything, either with an image or most common now is CSS3.
    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    Here is a CSS3 generator to make a shadow. http://css3generator.com/

    #19614
    Prisca
    Participant

    As fast as usual…incredible ..haha

    Yep I tried all thos CSS3 conbination but none is working. For a good laugh (at me) here is all my trials:

    #showcase-wrapper,
    #banner-wrapper,
    #wpheader-wrapper {
    background-color: bf7b7b;
    background-repeat: repeat;
    border-bottom: 8px solid #d9dee1;
    box-shadow: 4px 5px 16px;
    }

    /*#container {
    -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    }*/

    #showcase {
    max-width:1170px;
    margin: 1% auto;
    padding:1% 5%;
    background-color: #934e49;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    }
    #banner {
    max-width:1920px;
    margin:auto;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    }
    #wpheader {
    max-width: 1170px;
    margin: 1% auto;
    padding: 0 2%;
    background-color: #934e49;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    box-shadow: 0px 0px 15px 5px rgba(000, 000, 000, .5);
    }

    Thank you so much 🙂

    #19615
    Sushil Adhikari
    Moderator

    What is it you want to add a shadow too (and what theme) ?

    By the way, you’re missing a # on one of your background hex colours:

    background-color: bf7b7b;
    #19616
    Prisca
    Participant

    Encounters. The very last border when here is a showcase – banner or nothing – the last line before the content. See attached at the bottom

    Thank you so much 🙂
    shadow_2014-04-05.jpg

    Attachments:
    You must be logged in to view attached files.
    #19617
    Sushil Adhikari
    Moderator

    I’m probably going to get flack for this because customization is not part of theme support…..however, the problem is how the theme structure was done, this one is a bit difficult. You have to make your page background white, then add a margin bottom to your showcase wrapper, then you can add your shadow. Otherwise, you will have to add a div container full width below the showcase wrapper and use a repeating shadow image…..the rest will have to be up to you 😛

    #14973
    Prisca
    Participant

    Thank yu so very much! I will play with your advice 🙂

    Have a great weekend.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.