- This topic is empty.
-
AuthorPosts
-
February 10, 2019 at 12:07 pm #282625
Bob Brunius
ParticipantFrom 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?
ThanksFebruary 10, 2019 at 1:47 pm #282627Shikkediel
ParticipantShouldn’t be too difficult, something like this for example.
February 10, 2019 at 2:45 pm #282628Bob Brunius
ParticipantWOW! So simple and perfect. Didn’t think to use a border radius. Thanks!
February 10, 2019 at 2:50 pm #282629Shikkediel
ParticipantNo problem, I’ve made a minor update because I noticed I used a
after
pseudo element. When more elements are added to the parent, abefore
element makes more sense.February 10, 2019 at 4:50 pm #282631Bob Brunius
ParticipantHow does the absolute positioned 150px box get centered when the top: and left: are set to zero?
I’m lost…
February 10, 2019 at 6:07 pm #282632Bob Brunius
ParticipantHave 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);
}
February 11, 2019 at 6:03 am #282640Shikkediel
ParticipantI’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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.