Rounded corners on header image
AnonymousSeptember 17, 2012 at 11:07 am #5742
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.ModQuote: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.
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.
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
- You must be logged in to reply to this topic.