Rounded corners on header image

  • Anonymous

    #5742

    Hi,

    Been using Graphene for a while now for various different sites and really like how customisable it is. However, have hit a problem and hope someone here might be able to point me in the right direction. I’ve googled and looked through the forums but can’t find anything relevant.

    My client wants to have rounded corners on the top of the header image which I’ve done in Photoshop for the graphic with a transparent background, but I don’t know how to make the shadow fit around the corners – it goes vertically straight up to the top of the page.

    Has anyone done this or knows how I should approach this?

    Many thanks in advance,

    Saph.

    Mod

    Kenneth John Odle

    #32599
    Quote:
    I don’t know how to make the shadow fit around the corners – it goes vertically straight up to the top of the page.

    That’s because the shadow doesn’t go around the header image—it goes on either side the content div.

    I don’t know that there’s a way to accomplish what you want other than creating a faux shadow in Photoshop, but you’ll still have the shadow on the content div to deal with.

    geoffsoz

    #32600

    Are you trying to round the header corners like it is done on one side here? if so I can tell how that it done, but I don;t know if that is what you are after,

    Geoff

    bonvic123

    #32601
    Quote:
    Are you trying to round the header corners like it is done on one side here? if so I can tell how that it done, but I don;t know if that is what you are after,

    Geoff

    I would like to know how to do that. Thanks in advance!

    geoffsoz

    #32602

    There may be better ways as I’m just a beginner, but my findings are that you need to round both the header and the container – the shadow will then follow the container outline.

    #header {
    -moz-border-radius-topright: 50px;
    -webkit-border-top-right-radius: 50px;
    border-top-right-radius: 50px;
    }
    #container {
    -moz-border-radius-topright: 50px;
    -webkit-border-top-right-radius: 50px;
    border-top-right-radius: 50px;
    }

    You would then need to copy these and change them to “top left” for the left side if required.

    My understanding for having to have three statements for each is because each of the different browser engines need their own format.

    Hope this helps

    Geoff

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!