I'm working on site where I need to animate divs that move over a sibling and apply a mix-blend-mode. I'm working with a library that create 2 divs the wrap around the blending element. The library also adds a transform to the direct parent, which is now breaking the blending. I figured this might relate to a stacking issue, but no matter how many/where I add a transform3d(0,0,0 ) the blend is still broken.
Due to the constraints of the library, I can't do much about of the wrappers or that the background is a sibling of the outermost wrapper.
If you toggle the requiredParent2 transform, everything works (as stated, this transform is added by a required library).
Additionally there are siblings to the blending element (mixBorder, which prevents me from moving the blending to the requiredParents)
Fiddle also here: https://jsfiddle.net/hb7qaod6/5/
.bg,
.root,
.requiredParent1,
.requiredParent2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.requiredParent2 {
transform: translate3d(0px, 2px, 0px);
}
.bg {
background-color: red;
}
.mix,
.mixBorder {
position: absolute;
top: 50%;
left: 50%;
width: 25%;
height: 25%;
}
.mix {
background-color: white;
mix-blend-mode: difference;
}
.mixBorder {
outline: white solid thick;
}
<div class="root">
<div class="bg"></div>
<div class="requiredParent1">
<div class="requiredParent2">
<div class="mix">
</div>
<div class="mixBorder">
</div>
</div>
</div>
Related
I want to add rgba(0,0,0,0.25) on top of backgroundColor: "#0075FF" to make it darker. However is there any way to achieve it without using a mixed color value? Note: I also would like to avoid an approach that has an overlaid element on top of it.
You can use a this trick with linear gradients:
background: linear-gradient(#f005, #f005), linear-gradient(#0f05, #0f05);
In this way you are using two gradients with alpha. The trick is that the colours of gradients starts and ends with the same value.
You can do a pure CSS approach, although it sort of overlays a pseudo-element on top of the main element.
*Try hovering over the example.
.colored {
background: #0075FF;
width: 100px;
height: 100px;
position: relative;
}
.colored:hover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.25);
}
<div class="colored"></div>
You can always make a separate container, place the elements in it, then in css make the new container the same size as the one you want to place on the other. I used a low opacity so you can see through the top color, making it look purple when it isn't.
You gain adjust the size of the container and then use placement methods as you wish.
.main {
width: 200px;
height: 200px;
background: red;
}
.img {
background-color: blue;
width: 200px;
height: 200px;
z-index: 2;
opacity: .5;
}
<div class="main">
<div class="img"></div>
</div>
You can use a :before pseudo element.
<div className="container">
....content
</div>
.container {
position: relative;
background-color: #0075FF;
}
.container:before {
content:"";
display:block;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);
}
I'n using translateY() to pull an element up to overlap an element above it.
.element {
transform: translateY(-50%);
}
It leaves space to the bottom. Is there any way to pull up any elements below it?
https://codepen.io/anon/pen/OBYRMe
In the example you can see it overlaps the element on top which is what I want but leaves space on the bottom. I am trying to achieve this without modifying other elements (e.g. use transform on elements on the bottom as well)
Note: using margin -50% does not work because it doesn't bring up the element 50% relative to the element's height. Only transform calculates the height to my knowledge.
You can apply transform on elements on bottom using the following css.I hope this is what you are looking for
.element ~ div {
transform: translateY(-50%);
}
You can use a negative big value in margin-bottom to pull the other elements:
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
margin-bottom:-100vh;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
<br><br>
<div class="test"></div>
Use margin-top: -50%; instead. Happy coding
You can use the box-shadow properties to solve the your problem otherwise you can use the flex-box or position etc. anyway I gave solution but I'm not sure you want this things or not:)
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
box-shadow:0px 100px yellow;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
Is it possible to have the CSS cursor property of a div propagate through a transparent div that overlays it?
Let me illustrate with a mock-up: https://jsfiddle.net/azL1ot2d/
With the following HTML code:
<div id="page">
<div id="clickable">Click me!</div>
<div id="glasspane">
<div id="other">Some glass-pane content</div>
</div>
</div>
And the following CSS code (reduced to the important parts):
#page {
position: absolute;
width: 100%;
height: 100%;
}
#clickable {
position: absolute;
top: 100px;
left: 100px;
background-color: orange;
cursor: pointer;
}
#glasspane {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
}
#other {
...
}
Notice how I set the cursor property on the clickable div, but the div is entirely covered by the glasspane div (which I use for effects, dialogs, ...). Is it possible to have the mouse-cursor change to the link-pointer if it hovers above the clickable-div even though the div is covered? In other words: Can I make the glasspane transparent to cursor settings? (I'd prefer not to use JavaScript for this)
Yes you can but there is no IE support, there you go : JSFiddle
The trick is to use pointer-events: none; on the top layer :)
#glasspane {
pointer-events: none;
}
I am trying to make an opening book animation with CSS transitions similar to a card flip animation except with another card behind it.
When I create a single card flip it works fine in chrome. But if I put it inside a parent div in order to place another card behind it the back of the card no longer shows.
HTML
<div class="scene">
<div class="turncard">
<div class="turncard-front">
<div class="turncard-outside turncard-side">
Front!!!<br/>I don't work
</div>
<div class="turncard-inside turncard-side">
Back!!!<br/>Can you see me?
</div>
</div>
</div>
</div>
CSS
.scene {
margin-left: 200px;
perspective: 6000px;
}
.turncard {
width: 200px;
height: 200px;
margin-top: 50px;
transform-style: preserve-3d;
}
.turncard-front {
height: inherit;
width: inherit;
transition: transform 0.6s;
transform-origin: top left;
}
.turncard-side {
height: inherit;
width: inherit;
position: absolute;
backface-visibility: hidden;
background-color: green;
text-align: center;
}
.turncard-outside{
z-index: 1;
}
.turncard-inside {
transform: rotateY(180deg);
z-index: -1;
}
.turncard-front:hover {
transform: rotateY(180deg);
}
Both the working version (without a parent div) and non-working example (with the div) are shown in this fiddle: http://jsfiddle.net/bxLa4kwu/1/
Stick this property on .turncard2-front:
transform-style: preserve-3d;
http://jsfiddle.net/bxLa4kwu/3/
This property tells it to preserve the 3D position of children of the turncard2-front element (e.g. inside and outside of the page) when turncard2-front is css transformed.
Be aware this doesn't work in IE11 as the property isn't supported (but you probably knew that as the first example doesn't work either in IE).
I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.
I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!
A very old (unanswered question) deserves an answer.
You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.
Here is a basic example: (please note: jQuery only required for demo)
$('.tri').click(function() {
alert("triangle clicked!");
});
.wrap {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
margin: 2px auto;
}
.wrap .tri {
position: absolute;
height: 70%;
width: 70%;
background: tomato;
transform-origin: bottom left;
bottom: 0;
transition: all 0.6s;
left: 0;
cursor: pointer;
transform: rotate(45deg);
}
.wrap2 {
transform: rotate(180deg);
}
.wrap .tri:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="tri"></div>
</div>
<div class="wrap wrap2">
<div class="tri"></div>
</div>