Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Site banner design with half circle: HTML5 ?

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.