i don't understand why the div which is lower in zindex keep blocking the div which have higher zindex :
This is my simple html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style>
body {
background-color: lightblue;
}
html, body, canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#startMenuWrapper {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
overflow: hidden;
}
#startMenuWrapper {
z-index: 2;
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#playerNameInput {
width: 200px;
text-align: center;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
box-sizing: border-box;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
outline: none;
}
#startButton, #spectateButton {
position: relative;
margin: auto;
margin-top: 10px;
width: 200px;
height: 40px;
box-sizing: border-box;
font-size: large;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #2ecc71;
border: 0;
border-bottom: 2px solid #28be68;
cursor: pointer;
margin-bottom: 10px;
}
#spectateButton:active, #spectateButton:hover,
#startButton:active, #startButton:hover {
top: 1px;
background: #55D88B;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs"></canvas>
</div>
<div id="startMenuWrapper">
<input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" /></br>
<button id="startButton">Play</button></a>
<br />
</div>
</body>
</html>
why is the "playerNameInput" input box is blocked ?
z-index requires a position other than the default static. It will have no effect if you don't set the property to one of the following: relative | absolute | fixed
body {
background-color: lightblue;
}
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */
}
#startMenuWrapper {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
overflow: hidden;
}
#startMenuWrapper {
z-index: 2;
position: relative;
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#playerNameInput {
width: 200px;
text-align: center;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
box-sizing: border-box;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 10px;
outline: none;
}
#startButton,
#spectateButton {
position: relative;
margin: auto;
margin-top: 10px;
width: 200px;
height: 40px;
box-sizing: border-box;
font-size: large;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #2ecc71;
border: 0;
border-bottom: 2px solid #28be68;
cursor: pointer;
margin-bottom: 10px;
}
#spectateButton:active,
#spectateButton:hover,
#startButton:active,
#startButton:hover {
top: 1px;
background: #55D88B;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs"></canvas>
</div>
<div id="startMenuWrapper">
<input type="text" tabindex="0" autofocus placeholder="Enter alphanumeric characters" id="playerNameInput" maxlength="25" />
</br>
<button id="startButton">Play</button>
</a>
<br />
</div>
In order z-index to be applyed in this case playerNameInput should have position:relative and some z-index value
Related
Hello I have a little problem with my background which is used on button::after element. Effect I would like to have it's background slide out from left to right's button side but it cover my whole text. I tried to use z-index but it doesn't work at all. Any ideas how to approach this problem?
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
background-color: #000;
transition: 0.3s linear;
/* z-index: -1; */
}
button:hover::after {
width: 100%;
}
button:hover {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>button</button>
</body>
</html>
As you are using button::after to create the slide out effects on background, it will create a pseudo-element that is the last child of the button.
To solve the issue, we will need to make the button text appears on top of the pseudo-element by wrapping the button text in an extra <p> tag so that we can apply CSS style z-index: 1; to bring it to the top.
<button>
<p>button</p>
</button>
button > p {
margin: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
Final code:
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
background-color: #000;
transition: 0.3s linear;
}
button:hover::after {
width: 100%;
}
button:hover {
color: white;
}
/* Below are the newly added CSS styles, others are unchanged */
button > p {
margin: 0;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
<button>
<p>button</p>
</button>
It's much easier to use box-shadow. You can use the inset property and horizontal offset to give you the same effect and it's much less css.
HTML
<button>button</button>
css
button {
padding:0.5rem 2rem; border:2px solid black;
box-shadow: 0px 0 0 0 black inset
}
button:hover {
box-shadow: 200px 0 0 0 black inset;
transition: box-shadow 1s, color 1s;
color:white;
}
I've put an example here. Just tweak to suit your needs
body {
text-align: center;
}
button {
position: relative;
padding: 10px 25px;
font-size: 40px;
margin-top: 100px;
border: 2px solid black;
background-color: grey;
border-radius: 20px;
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
overflow: hidden;
color: black;
transition: 0.25s 0.05s linear;
z-index: 2;
}
button:hover {
color: white;
}
button::after {
content: "";
position: absolute;
width: 0;
height: 100%;
bottom: 0;
left: 0;
color: white;
transition: 0.3s linear;
z-index: -1;
}
button:hover::after {
width: 100%;
background: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button>button</button>
</body>
</html>
Is this like you wanted?
I have implemented a :hover animation for a link that takes you to another part of the website. When hovered in Firefox or Google Chrome, the width of the border of the :before and :after pseudo-elements are 2px like specified but when checking Safari, I found the width to be thicker than what is expected.
The HTML, CSS and screenshots of the occurrence are below.
Firefox and Chrome:
Safari:
Code:
a {
text-decoration: none;
color: inherit;
}
#title {
color: black;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gallery-link {
padding: 15px 0;
text-align: center;
}
#gallery-link-padding {
padding: 15px 60px;
}
.frame-effect-click {
position: relative;
font-weight: 500;
font-size: 16px;
cursor: pointer;
border-radius: 10px;
transition: 0.4s;
}
.frame-effect-click:after, .frame-effect-click:before {
content: '';
position: absolute;
width: 0;
height: 0;
transition: all 0.4s linear, opacity 0.1s 0.4s;
opacity: 0;
}
.frame-effect-click:after {
bottom: 0;
right: 0;
border-bottom: 2px solid black;
border-right: 2px solid black;
}
.frame-effect-click:before {
top: 0;
left: 0;
border-top: 2px solid black;
border-left: 2px solid black;
}
.frame-effect-click:hover:after, .frame-effect-click:hover:before {
width: calc(100% + 10px);
height: calc(100% + 10px);
transition: 0.4s, opacity 0.1s;
opacity: 1;
}
<div id="title">
<div id="gallery-link">
<a id="gallery-link-padding" class="frame-effect-click" href="#">View gallery</a>
</div>
</div>
Does anyone know why that is and how to fix this issue?
I would like to make a range slider just like in the image but the circle in the middle is not getting bigger than the height of the slider.
Here is my code:
.range-slider {
width: 100%;
margin: 1.5em 0;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 87%;
height: 10px;
border-radius: 10px;
background: #eaeefb;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
overflow: hidden;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
border-radius: 50%;
/* background: url("images\icon-slider.svg"); */
background-color: #10d5c2;
border: 10px solid #10d5c2;
cursor: pointer;
box-shadow: -407px 0 0 400px #a5f3eb;
overflow: visible;
}
<div class="range-slider">
<input type="range" min="0" max="4" value="0" class="slider" id="sliderRange">
</div>
The slider handle is clipped to the size of the slider bar because of the overflow property.
Remove overflow: hidden from the .slider css class to show it.
.range-slider {
width: 100%;
margin: 1.5em 0;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 87%;
height: 10px;
border-radius: 10px;
background: #eaeefb;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
border-radius: 50%;
/* background: url("images\icon-slider.svg"); */
background-color: #10d5c2;
border: 10px solid #10d5c2;
cursor: pointer;
box-shadow: -407px 0 0 400px #a5f3eb;
overflow: visible;
}
<div class="range-slider">
<input type="range" min="0" max="4" value="0" class="slider" id="sliderRange">
</div>
Remove overflow: hidden
.range-slider {
width: 100%;
margin: 1.5em 0;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 87%;
height: 10px;
border-radius: 10px;
background: #eaeefb;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
border-radius: 50%;
border: 10px solid #10d5c2;
background: #10d5c2;
cursor: pointer;
}
<div class="range-slider">
<input type="range" min="0" max="4" value="0" class="slider" />
</div>
In the example here, button.vertical-button__btn with the text "Description" is hoverable and clickable in all browsers but IE. (I've put a CSS border on hover to illustrate this. You can also see when the button is clickable by the 'hand' pointer appearing.)
A caveat: When I say it is not clickable in IE, I mean that the full button text (highlighted in yellow) is not clickable. Oddly, the extreme right edge of the button element does click and hover as intended.
What is causing this behavior, and how can I make the functionality the same in IE as with modern browsers?
I am only interested in supporting IE 11 and Edge... IE 10 and under do not need to be supported.
Edit:
Another odd behavior: If I remove the element div.project__image The button becomes clickable, but I cannot figure out why, and I need the div element to remain.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
I do believe that it's a matter of z-index.
If you add a z-index: 200 to your vertical-button, the button will be clickable, even in IE.
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
z-index: 200
}
.vertical-button__btn,
.vertical-button__btn:focus,
.vertical-button__btn:active {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
position: absolute;
top: 0px;
transform-origin: left top;
transform: rotate(90deg) translateX(-32%);
float: right;
padding: 5px;
cursor: pointer;
cursor: hand;
}
.vertical-button__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}
<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>