Here's my fiddle.
Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?
.box {
float: left;
width: 200px;
height: 200px;
color: #fff;
background-color: lightblue;
position: relative;
}
.big-box {
float: left;
position: relative;
}
.big-box:after {
content: "";
box-shadow: inset 0px 0px 10px 0px #000;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
width: 100%;
height: 100%;
}
.box:hover {
background-color: green;
}
.big-box:after{
pointer-events: none;
}
https://jsfiddle.net/tm9pzudy/1/
Related
I want to make a fancy button (The button Example image is attached below), I actually Saw this button on a website
I am a beginner to CSS, I have very less idea about it but still I want to know how we can make buttons like this, along with it's hover effect, Please help me out...
The image of the button :-
enter image description here
You can check the button snippet below created using pseudo class.
I used position: absolute to arrange the border. You can align it anywhere using the top and left properties.
button {
border: 0;
outline: none;
padding: 10px 20px;
background-color: #335dff;
color: #fff;
cursor: pointer;
position: relative;
}
button::after {
content: '';
display: inline-block;
width: 100%;
border: 1px solid #335dff;
position: absolute;
height: 35px;
left: -5px;
top: 5px;
border-radius: 2px;
}
section {
background-color: #000;
height: 300px;
padding: 30px;
}
<section>
<button>Click</button>
</section>
Looking at the code they use as #MMD suggests you can see that there are two main things in use.
Each link has a before pseudo element with a left and bottom border positioned absolutely relative to the a element and the border color is picked up from a CSS variable --bg.
To get the hover effect note that on hover the button tranlates down and left while the amount the pseudo element is offset from the button reduces to zero.
<style>
body {
background: black;
width: 100vw;
height: 100vh;
}
.link {
width: 20vmin;
height: 10vmin;
padding: 2vmin;
background-color: var(--bg);
position: relative;
display: inline-block;
margin: 2vmin;
transform: translate(0, 0);
transition: transform 0.3s linear;
}
.link::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 1vmin;
left: -1vmin;
border: solid var(--bg) 1px;
display: inline-block;
}
.link:hover {
transform: translate(-1vmin, 1vmin);
}
.link:hover::before {
top: 0;
left: 0;
}
.link1 {
--bg: white;
}
.link2 {
--bg: cyan;
}
</style>
<body>
<a class="link link1">Link1</a>
<a class="link link2">Link2</a>
</body>
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
I am trying to style button like this:
Now I first though I could just style it with an ::after element attached to the button.
Currently I have this (using sass syntax):
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
z-index: 10;
&::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -2;
}
}
But this renders something which looks a little different:
The rectangle more to the right is my :afterelement.
It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.
How could I style this correctly?
Thanks for the help
Cheers
Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.
You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
}
button::after {
content: '';
display: block;
position: absolute;
top: -10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
body {
padding: 20px;
}
<button>Button</button>
I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)
button {
min-width: 230px;
border: 1px solid green;
background-color: white;
padding: 25px;
display: block;
position: relative;
left: 20px;
z-index: 10;
transform: rotateY(180deg);
}
button::after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
border: 1px solid green;
background-color: white;
z-index: -1;
}
.buttonz{
transform: rotateY(180deg);
}
<button>
<div class="buttonz">
Button
</div>
</button>
I want to do animation of opening two (top and bottom) 'shutters', behind which I want to show some data (eg. number).
I am using z-index, because I want the number behind this curtain (opening shutters) to be there before curtain is open.
Animation need to be that upper stripe will shrink to the top edge and lower striper will shrink to the bottom edge. Shrink should be visible as making height of each strip lower - so from original height of 13px to 0px. At the same time upper's stripe CSS top attribute should be +=1px and lower's stripe top should be -=1px, to mimic that they are opening.
For now i have problem with making each stripe height from original value to 0px (only one of them is 'opening'). And i don't know how to change their top attributes at the same time.
When in middle of animation time, it should like below:
CSS and HTML
#wrapper {
width: 100px;
height: 30px;
border: 2px solid black;
position: relative;
top: 50px;
z-index: 2;
}
.stripe {
position: relative;
width: 98px;
height: 13px;
background: green;
z-index: 1;
border: 1px solid red;
transition: height 500ms ease-in-out;
}
.stripe:hover {
height: 0;
}
#money {
position: relative;
top: -25px;
width: 90%;
display: block;
margin: 0 auto;
z-index: 0;
text-align: center;
}
<div id="wrapper">
<div class="stripe"></div>
<div class="stripe"></div>
<input type="text" id="money" value="1200">
</div>
You should really be using position:absolute for this and relative widths and heights (percentage values). A few tricks thrown in and I think this is closer to what you were trying to achieve.
#wrapper {
width: 100px;
height: 30px;
border: 2px solid black;
position: relative;
top: 50px;
z-index: 2;
}
.stripe {
position: absolute;
width: 100%;
height: 50%;
background: green;
z-index: 1;
transition: height 500ms ease-in-out;
}
.stripe:first-child {
border-bottom: 1px solid transparent;
top: 0;
}
.stripe + .stripe {
border-top: 1px solid transparent;
bottom: 0;
}
#wrapper:hover .stripe {
height: 0;
}
#money {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
display: block;
margin: auto;
z-index: 0;
text-align: center;
height: 1.2em;
line-height: 1.2em;
}
<div id="wrapper">
<div class="stripe"></div>
<div class="stripe"></div>
<input type="text" id="money" value="1200">
</div>
To clarify what I mean by a few tricks, I used a transparent 1px border on the bottom and top of the top and bottom shutters (respectively); I used a set width and height on the input box with margin: auto to both vertically and horizontally center it; and I used the <selector> + <selector> selector (adjacent sibling selector) to differentiate between either stripe (this is fully CSS2.1 compliant and will work pretty far back for browser compatibility).
Edit:
As requested, to convert this solution to a javascript one, just replace all occurrences of :hover (there's only one in this situation) with a class (e.g. .hover-state); and toggle the class with your favorite goto event listener format. No need for more than one class in this case.
var wrapper = document.getElementById('wrapper');
wrapper.addEventListener('mouseenter', function(){
this.classList.toggle('hover-state');
});
#wrapper {
width: 100px;
height: 30px;
border: 2px solid black;
position: relative;
top: 50px;
z-index: 2;
cursor: text;
display: block;
}
.stripe {
position: absolute;
width: 100%;
height: 50%;
background: green;
z-index: 1;
transition: height 500ms ease-in-out;
}
.stripe:first-of-type {
border-bottom: 1px solid transparent;
top: 0;
}
.stripe + .stripe {
border-top: 1px solid transparent;
bottom: 0;
}
#wrapper.hover-state .stripe, input:focus ~ .stripe {
height: 0;
}
#money {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 90%;
display: block;
margin: auto;
z-index: 0;
text-align: center;
height: 1.2em;
line-height: 1.2em;
outline: none!important;
border: none;
background: transparent;
}
<label id="wrapper">
<input type="text" id="money" value="1200">
<div class="stripe"></div>
<div class="stripe"></div>
</label>
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.