world {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
bg {
width: 100%;
height: 100%;
position: absolute;
z:1;
transform:rotateX(20deg) rotateY(10deg);
background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
width: 350px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
mix-blend-mode: overlay;
z:100;
perspective:500px;
transform-style:flat;
backface-visibility:hidden;
}
layer {
position:relative;
background: rgba(0, 122, 255,0.8);
padding: 20px;
color: #fff;
text-transform: uppercase;
font-family: "Arial";
font-size: 30px;
text-align: center;
transformOrigin:50% 50% 50%;
transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}
<world>
<bg></bg>
<layer_wrap>
<layer>THIS IS A LAYER</layer>
</layer_wrap>
</world>
In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode and for other requirements of the Project.
The Results how it is rendered in Safari and Chrome are different. Safari cuts the half of the Layer rendering the whole world in one container. transformStyle preserve-3d or other Tricks were not helpful.
Also a transformZ is not the solution since it would change the size and distance to viewer.
Hope one of you guys have a good solution for this. Cheers !
Related
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
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;
}
Is it possible to make this shape with CSS? It can't be done with border radius, is there another way to 'bend' a rectangles sides?
As the other answers, the best way to make your shape perfect is using SVG. However with css3 and the help of pseudolements after and before You may have close shapes.
This one is far from good as I've made the FIDDLE as a fast example but with time you may get better results:
div {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: green;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
div:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
div:after {
content: '';
position: absolute;
bottom: 0px;
right: -11px;
width: 130px;
height: 120px;
background: green;
border-radius: 20% / 150%;
}
I don't think there's any widespread method for constructing shapes like that with pure css.
What you could try though is using inline svg:
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
This is just an example svg, you'll have to model your own. It also accepts base 64:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat;
Edit: I created a fiddle: https://jsfiddle.net/pm3czdhj/7/
You could also try looking into the css property clip-path.
Do some CSS like this will make the rectangle have curved edges:
div {
border: 2px solid;
border-radius: 25px;
}
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);
}
Is what I state in the table possible with css3?
In css2 you can't replicate directly that behaviour and is really boring, you have to do a lot of workarounds for something that already exists.
Here is the image I'm working on (the image is clickable to zoom in):
I'm trying to make that dark grey part to fill everything between the 2 green parts. How to make it?
I found the solution in an interesting article: http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/
I found that link from here: http://csscreator.com/node/11049
The important part is this one:
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentBottom{
top: auto;
bottom: 0;
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
Expecially using position: fixed and top: auto (never used I don't also understand very well what does it means).