Skip to main content

Forums

This topic contains 6 replies, has 2 voices, and was last updated by  Shikkediel 5 days, 16 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #282625

    Bob Brunius
    Participant

    From a graphics designer I got the following design suggestion: https://oiyc.org/images/headerWithHalfCircle.jpg

    It’s a horizontal banner about 100px in height across the top of the page. In the middle a half circle descends below the banner to allow room for the logo. I’m not sure how to implement this. Could go with with a css banner with a photo of the half circle pasted to the underside but that would complicate any drop shadowing.

    Or, can it be completely implemented with HTML5 constructs? How to go about it? Questions about browser compatibility comes up.

    Any thoughts?
    Thanks

    #282627

    Shikkediel
    Participant

    Shouldn’t be too difficult, something like this for example.

    codepen.io/anon/pen/XOEEOZ

    #282628

    Bob Brunius
    Participant

    WOW! So simple and perfect. Didn’t think to use a border radius. Thanks!

    #282629

    Shikkediel
    Participant

    No problem, I’ve made a minor update because I noticed I used a after pseudo element. When more elements are added to the parent, a before element makes more sense.

    #282631

    Bob Brunius
    Participant

    How does the absolute positioned 150px box get centered when the top: and left: are set to zero?

    I’m lost…

    #282632

    Bob Brunius
    Participant

    Have a look: http://new.oiyc.org

    One problem is my burgee that I sat in the ::before is getting cropped. Can’t figure out how to stop that. Also, I was hoping to put a drop shadow on the whole lower edge thing but not having any luck with that either.


    #menus{height: 100px;
    position: relative;
    background: white;
    box-shadow: 0 10px 20px rgba(0,0,0, 0.5);
    }

    #menus::before{
    z-index:10000;
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    overflow: visible;
    left: 0;
    right: 0;
    top: 10px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background: white;
    margin: auto;
    background-image: url("http://new.oiyc.org/Common/pageImages/OIYC_burgee_warp_small.png");
    background-repeat: no-repeat;
    background-size:180px;
    background-position: 27px 10px;
    box-shadow: 0 10px 20px rgba(0,0,0, 0.5);
    }

    #282640

    Shikkediel
    Participant

    I’m lost…

    Don’t think about the why on that one, it’s just one of those things that happens to work because of how the W3 spec is defined – using margin: auto is essential there too. But you could also take another approach to center it.

    I think you solved the cropping issue…

    Box-shadow I figured would be tricky, I’ll have to take another look at that one.

    Edit – first attempt

    Also a second attempt, where the circle is a separate div and the pseudo used for the shadow.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star