I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}
Related
I am a novice as best please pardon me, but I'm learning.
I can illustrate what I need with an image.
Vertical Navigation 'White Curved Tab as Selector':
This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..
I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.
Here is my CSS thus far:
`.body{}
`.mobile-menu-nav.moved {
max-width: 75px;
width: 75px`
}
#head{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
#main-wrapper{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
.menu {
width: 60px;
height: 100%;
position: left;
border-radius: 15px;
border: 1px solid #00F;
}
.mobile-menu-nav li a {
font-family: Arial, sans-serif;
font-size: 12px;
color: #FFF;
background-color: transparent;
width: 100px;
height: 22%;
border: 1px solid transparent;
margin: auto;
margin-top: 50%;
margin-bottom: 50%;
margin-left: -15px;
position: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
-o-transform: rotate(-90deg);
`
https://sproutsa.co.za
Thanks much.
I think it would be the best to use ::after or ::before
.mobile-menu-nav li a:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent url('../images/your_image.svg') no-repeat;
background-size: contain;
background-position: center;
}
I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.
Second similar solution is:
.mobile-menu-nav li a {
display: flex;
}
.mobile-menu-nav li a::after{
content: url('../images/your_image.svg');
width: 20px;
padding-left: 8px;
}
SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.
Use ::after or ::before depending on position you want icons to be, right or left.
I've got two divs .navigation & .entry-image
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: #008dd0;
background-blend-mode: multiply;
z-index: 100;
color: #fff;
background-size: cover;
background-position: top;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
}
The background aligns well on widescreen however set as size:cover, they do not stay aligned as they respond obviously.
I've experimented with background-size:100% - this does not work on 100vh as it repeats.
Any suggestion on how I can keep the backgrounds aligning while still maintaining 100vh on the parent container. This is all due to the .navigation having a multiply blend mode applied which is only required behind the .navigation div
codepen: https://codepen.io/lisa-jaffe/pen/jOErBBX
I hope I understood your question correctly. If so:
If what you're trying to achieve is to have a sort of overlay on top of the image then instead of trying to align 2 images, which is rather difficult, you can use a proper "overlay", which is far simpler.
What I did was remove the navigation image and instead use a background color with transparency. You get the same result as your code but without the alignment issues.
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: rgba(6, 84, 121, 0.7);
z-index: 100;
color: #fff;
height:300px;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
background-image:url(https://loremflickr.com/1680/1050);
}
<div class="navigation"></div>
<div class="entry-image"></div>
Here's a codesandbox if you need that instead
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
It seems something like this has been addressed before, but most of what I'm finding is for the more generic issue that doesn't pertain to most browsers today. I'm encountering the known IE issue where using border-radius with a border and a background (a color in my case) results in the background bleeding beyond the border.
I'm wondering if there is a workaround that actually can mask this issue... Some of the things I've tried:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
overflow:hidden on the parent
background-clip:border-box
adding .1 to the border-radius
None of these have worked. Is there another workaround (other than "use images") while I wait for yon IE team to fix things?
I've created a fiddle that illustrates this well and documents what I've found in more detail.
I have experienced this before.
I recommend instead styling the border with CSS generated content, in a manner such as this:
.redcircle::after {
content:'';
display:block;
left:0;
top:0;
right:0;
bottom:0;
border-radius:100px;
border:10px solid yellow;
position:absolute;
pointer-events: none; //ensures no clicks propogate if this is desired
}
You can crate an ::before or ::after CSS Pseudo and make your background: red; on them. Set your width, height and border-radius on 100% and for example don't change z-index to -1, you can see his get the inside width and hight and don't bleeding out.
Screenshot from Explorer 9 on Vista
And now for example (how its look without z-index play):
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
And this one for using:
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
Fiddle Demo
Borrowing from Zeev's answer, which moves the background-color to a :before or :after (which only substitutes a subpixel gap for a subpixel bleed, and across more browsers), and Phil's answer, which moves the border to an :after (which didn't really fix the problem).
Move the background-color to a :before as suggested by Zeev, but give it padding equal to the border-width minus two (or use calc()). Then give it negative top and left positioning with that same amount.
Then move the border to the :after but give it negative top and left positioning equal to the border-width.
This creates an oversized background and recenters it below the content. Then it creates an oversized border and centers it around the content. You could probably oversize the background to other degrees and get the same result. The point is to make it bigger than the hole inside the border, but smaller than the outside of the border. This, naturally, would fail with thin borders, though.
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 150px;
top: 50px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
}
.redcircle::before,
.redcircle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.redcircle::before {
z-index: -1;
background: red;
top: -8px;
left: -8px;
padding: 8px;
}
.redcircle::after {
top: -10px;
left: -10px;
border: 10px solid yellow;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
background-clip fixes this issue:
.bluebox {
background-clip: padding-box;
}
In the following example, I demonstrate the issue where the colors are perfect, except for portions at different %'s results in some or all of the text being obscured.
What I would like to achieve, is to somehow assign the font color to be the difference of the background. I recall seeing something many years ago in DHTML which allowed for this. The result I am looking for is as follows
In the 50% sample, the '5' would be in white, and the '0' would be in black.
In the 75% sample, the '75' would be in white.
In the 20% sample, the '20' would be in black.
I believe there is a way to do this using CSS/CSS3, but I am unable to locate information on it.
The resulting style information should be contained inside the 'p' style in the CSS file. No 'tricks' like splitting data or altering the HTML using JavaScript / etc. The number inside the <p> element should remain whole and in tact.
body {
background: #000000;
}
p {
background: #ffffff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
background-repeat: repeat-y;
background-size: 0% auto;
color: #ffffff;
padding: 5px;
text-align: center;
border: 1px solid #3E8096;
display: block;
}
<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>
Note:
I was considering a drop-shadow, however this would result in a funny
looking font when it is a white font. I also considered encapsulating
the text in a border, however the ideal result would be for the font
to adjust based on background.
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
span {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>
0000 <span></span>
</div>
body { background: navy }
div {
background-color: white;
display: inline-block;
border: 1px solid red;
width: 200px;
font-size: 50px;
text-align: center;
position: relative;
color: red;
}
div:after {
content: '';
position: absolute;
background: cyan;
width: 50%;
top: 0;
left: 0;
height: 100%;
display: inline-block;
mix-blend-mode: difference;
}
<div>00000</div>
Lets assume I have a div with a Gradient applied as a background-property.
I now want to overlay a black PNG (of smaller size) and set the PNG to have a background-blend-mode of overlay. Unfortunately I have no idea on how to achieve this.
I know I can have a working background-blend-mode when I render the Gradient into the CSS of the Div with the PNG image like:
background: url(../img/plus.png), linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
background-blend-mode: overlay;
This however results in the Gradient being as small as the actual PNG, which is not a desired effect, like this:
What I want to achieve is this with pure CSS (if possible):
Here a Codepen to illustrate what I'm trying to do: http://codepen.io/anon/pen/zxOXGP
Notice the Black Icon. I wanna overlay this.
Try using mix-blend-mode instead of background-blend-mode and switch to simple text for the plus-sign or a webfont for more custom figures.
Example Codepen of the below:
.placeholder {
position: relative;
width: 400px;
height: 300px;
background-image: -moz-linear-gradient(#ff0000, #0000ff);
background-image: -webkit-linear-gradient(#ff0000, #0000ff);
background-image: linear-gradient(#ff0000, #0000ff);
}
.center {
position: absolute;
top: 25%;
width: 100%;
font-size: 120px;
}
.center span {
display: block;
text-align: center;
color: red;
mix-blend-mode: screen;
}
<div class="placeholder">
<div class="center"><span>+</span>
</div>
</div>
The gradient sandwich
Ingredients
The :before forms the bottom z-layer with z-index: 1, it is full opacity
The .content div forms the filling, central z-layer, with z-index: 2. It needs position: relative to take its z-index.
The :after forms the top z-layer with z-index: 3 and completes our lunch item. It is half opacity.
This is the tasty result:
Full Example
I have removed all but the standard CSS3 gradient for simplicity. View in a supporting browser.
.gradient {
position: relative;
height: 200px;
padding: 20px;
}
.gradient:before,
.gradient:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background-size: 100%;
background-image: linear-gradient(to bottom, #24cae4 0%, #1f81e3 100%);
opacity: 0.5;
}
.gradient:before {
opacity: 1;
z-index: 1;
}
.gradient:after {
z-index: 3;
}
.overlayed_image {
position: relative;
width: 64px;
height: 64px;
display: block;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://cdn.flaticon.com/png/256/9029.png);
}
.content {
position: relative;
z-index: 2;
}
<div class="gradient">
<div class="content">
You can see me!
<div class="overlayed_image"></div>
</div>
</div>