How do I force clip a child to a parent element that has rounded corners.
<div class="item" >
<div class="top">
<h1>Tile</h1>
<h2>Click me</h2>
</div>
<div class="behind">
<h3>Details</h3>
</div>
</div>
When animating the child, its ignores the border-radius of the parent element. Is there a way to fix the two corners on the top?
.item{
text-align: center;
cursor: pointer;
overflow: hidden;
height: 280px;
width: 280px;
float: left;
border-radius: 5px;
background: white;
margin: 10px;
position: absolute;
}
.top{
z-index: 1;
position: absolute;
height: 280px;
width: 280px;
background: #ed844b;
transition: 0.3s;
border-radius: 5px;
}
.behind{
z-index: 0;
position: absolute;
width: 100%;
top: 136px;
height: 138px;
padding: 10px 16px;
background: #DDDDDD;
box-sizing: border-box;
border-radius: 5px;
}
.slide-up{
transform: translate3d(0, -136px, 0);
border-radius: 0px;
}
Here is a little demo:
http://codepen.io/Koopa/pen/xbaMez
Thanks
Koopa
When you add a css 3d transform to the child, you kinda move it to the separate GPU layer. You can move parent element to GPU layer instead adding null-transform hack transform: translateZ(0) to .item. Or you can replace translate with translateY (In this case child is clipped only when not being animated).
Related
I'm trying to position my arrow on the right side of the parent div with position relative, but so far I have not managed to do it.
This is my HTML:
<div class="button--collapse">
<h2 class="title" >Your selection</h2>
</div>
and the CSS:
.button--collapse {
display: table-cell;
vertical-align: middle;
text-align: right;
position: relative;
}
.button--collapse:after {
position: absolute;
content: "›";
color: white;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(90deg);
margin-top: 0;
background-color: transparent;
transition: all 0.25s;
}
What am I doing wrong? Can somebody please help me?
Thank you.
You need to add a positive length to your right property and then give the parent a bit of padding as the position:absolute takes the element out of the documents normal flow.
.button--collapse {
display: table-cell;
vertical-align: middle;
text-align: right;
position: relative;
border: 1px solid black;
padding-right: 2rem; /* padding right added to accommodate the after absolute element that si taken out of the normal flow */
}
.button--collapse:after {
position: absolute;
content: "›";
color: black;
right: 10px; /* add 10px to move over from right 10px */
top: 50%;
transform: translateY(-50%) rotate(90deg);
margin-top: 0;
background-color: transparent;
transition: all 0.25s;
}
<div class="button--collapse">
<h2 class="title" >Your selection</h2>
</div>
I want to make a div something like the below image in my website in css. I tried to round bottom borders with border-bottom-right-radius: 50%;, but it curves too much.
please help me to make it.
You can try stacking divs, set a container with overflow: hidden and then position 2 divs that are much bigger and have rounded border.
.container{
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.inner, .outer{
position: absolute;
width: 200%;
height: 1000px;
border-radius: 100%;
border: 4px solid black;
left: -50%;
/* only for the inner - will be overwritten in the next section*/
top: -900px;
background-color: white;
z-index: 3;
}
.outer{
top: -750px;
background-color: #3E9AD2;;
z-index: 2;
}
<div class="container">
<div class="inner"></div>
<div class="outer"></div>
</div>
I'm wondering how to achieve this kind of css active style link shape I designed, should i create a specific shape for the left rounded part or should I just use border-left and try to tweak it ?
you can use ::after css pseudo element for this. Here is example fiddle. Hope this helps you.
.link {
height: 100px;
width: 100px;
background: red;
position: relative;
overflow: hidden;
}
.link::after{
content: "";
height: 80%;
background: #fff;
width: 20px;
position: absolute;
top: 10%;
left: -10px;
border-radius: 20px;
transition: all .35s;
opacity: 0;
}
.link:hover::after{opacity:1}
<div class="link"></div>
Check this link. You can lean more about CSS Pseudo-elements from there.
try using border radius like this
div {
width: 10px;
height:40px;
background-color: black;
border-top-right-radius: 6px;
border-bottom-right-radius:6px;
}
<div></div>
I can't work out how to rotate an element so that it sits underneath another one. The image below should illustrate the intended result.
Here is what I have tried so far:
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(90deg);
transform-origin: 24px 24px;
padding-left: 12px;
text-align: left;
}
.div1.originFromRight {
overflow: visible;
}
.originFromRight .div2 {
padding-right: 12px;
text-align: right;
transform: rotate(-90deg);
transform-origin: right top;
}
<div class="div1">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
<div class="div1 originFromRight">
<button>></button>
<div class="div2">HELLO</div>
</div>
The second example basically does what I want but the text is orientated the wrong way.
The closest I can get is example 3 but I need to pull this back to the left. I've tried translate but I can't get it to work, I've tried a negative right margin of 100% which almost works but basically doesn't.
One method to achieve the expected output would be to do the following:
Put the button within div2 and position it at the right edge.
Absolutely position the div2 at the bottom of the parent container.
Rotate the div2 in counter clockwise direction (-90deg) with the transform origin at left bottom.
After rotation, the div2 would entirely go outside of the container and hence we need to add an extra translateY(100%) to the transform stack.
The text is aligned to the right and an extra padding-right (greater than the width of the button) is added to keep the text away from the button.
The button would also get rotated by -90 degree because it is a child of div2 and to counter that (that is to make the button text get displayed properly), we need to apply counter rotation.
Now, in this approach the only drawback is that if the text length increases beyond what can be fit in a single line then it would wrap around to the next line (have a look at the second sample in snippet).
.div1 {
position: relative;
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
button {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
transform: rotate(90deg);
}
.div2 {
position: absolute;
box-sizing: border-box;
bottom: 0px;
height: 48px;
width: 100%;
padding-right: 60px;
line-height: 48px;
background-color: #999;
text-align: right;
transform: rotate(-90deg) translateY(100%);
transform-origin: left bottom;
}
<div class="div1">
<div class="div2">HELLO
<button>></button>
</div>
</div>
<div class="div1">
<div class="div2">HELLO WORLD!!!!!
<button>></button>
</div>
</div>
I have taken your second example and rotated the element the other way round.
And then fixed the position with an extra translateX
.div1 {
height: 120px;
width: 120px;
float: left;
margin: 20px;
border: solid 1px #000;
overflow: hidden;
}
.div1 button {
width: 48px;
height: 48px;
border: 0;
margin: 0;
padding: 0;
}
.div2 {
background-color: #999;
height: 48px;
line-height: 48px;
box-sizing: border-box;
}
.originFromLeft .div2 {
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
padding-left: 12px;
text-align: right;
}
<div class="div1 originFromLeft">
<button>></button>
<div class="div2">HELLO</div>
</div>
I have a series of floated divs with absolutely positioned images inside each one.
If this image is larger than the div width then it will appear cropped.
Although I have set overflow:visible to the floats and their parent div they still crop the image.
Here is a jsfiddle showing an example: http://jsfiddle.net/RkpAe/1/
CSS:
#main, #memorycontainer { height: 100%; width: 100%; overflow: visible; }
.memory { width: 250px; position: absolute; z-index: 98; width: 100px; height: 100px; overflow: visible; background: red;}
.memory { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 100; -webkit-border-radius: 50%; cursor: pointer; }
.memorytile { position: relative; z-index: 97; background: yellow; height: 300px; width: 200px; overflow: visible; float: left; margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }
HTML:
<div id="main">
<div id="tile1" class="memorytile">
<div class="memory" style="top: 50px; left: 150px;">
Icon</div>
Background Image
</div>
<div id="tile2" class="memorytile"></div>
remove
position:relative;
from
.memorytile{}
this should fix the problem.
Both your memorytile divs are set to the same z-index but because tile2 is after tile1 it is treated as being above it. memory is within tile1 (which is now below tile2 and so you get the effect you are seeing.
Change the z-index of tile1 to be higher than tile2 and it will work.
I updated your fiddle: http://jsfiddle.net/RkpAe/2/
There is also a nice explanation of this on http://webdesign.tutsplus.com/