Disabling CSS transition on box-shadow property

Disabling CSS transition on box-shadow property - javascript

Is it possible to disable transition of the box-shadow property on a button and enable it at the same time for different property values?
I have CSS:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 22px 22px 0px 0px rgba(172, 76, 51, 0.5), 0 0 0 2px #9e2a2b;
}
<button id="btn-more">More</button>
So obviously I want box-shadow with #9e2a2b color property to be visible all the time and disable its transition. However :hover box-shadow should still get the transition on :hover.
Tried to implement this solution but with no luck. Is there any way around this?

Switch the order of the shadows in your :hover state and the initial shadow will remain constant:
#btn-more {
padding: 6px 28px;
font-size: 24px;
line-height: 36px;
letter-spacing: 1px;
color: #c6ca53;
background: #9e2a2b;
border: 1px solid #c6ca53;
box-shadow: 0 0 0 2px #9e2a2b;
transition-duration: .3s;
}
#btn-more:hover {
box-shadow: 0 0 0 2px #9e2a2b, 22px 22px 0px 0px rgba(172, 76, 51, 0.5);
}
<button id="btn-more">More</button>

Related

Text gets out from its container

I cannot figure out why the whole fonts in the modern browsers don't fit its corresponding width? So, here we can see a brilliant example, where 84 goes out of its width borders... Why?
Example via devtools screenshot:
By the code:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<span class="test">84</span>

The text itself (in white) stays inside of the span. The text-shadow you are applying is not taken into consideration for layouting since it is considered a purely aesthetic element.
If you want to prevent the text shadow from leaving the span, you can set overflow: hidden:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
overflow: hidden;
}
<span class="test">84</span>
And if you want to the box to expand to cover the shadow, you can add some padding as needed:
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 80px;
position: absolute;
text-align: right;
text-shadow: -10px -10px 0 #000, 10px -1px 0 #000, -10px 10px 0 #000, 10px 10px 0 #000;
background: red;
padding: 0.1em;
}
<span class="test">84</span>

You can set shadow width to half of pixel (0.5px)
.test {
color: #fff;
font-family: Arial, sans-serif;
font-size: 8px;
line-height: 2;
position: absolute;
text-align: right;
text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000;
}
<span class="test">84</span>

Why is my while loop overriding the if statement

I'm running into a problem with my current project. It's a Math Game with a start button which when pressed turns into a reset button and then displays the timer countdown.
The countdown needs to start at 60 and descend to 0 and once it hits 0, I want to display a game over message, which I have already made using CSS.
Currently my code is responding with the timer jumping all the way to 0 without showing anything in between. The timer worked before I made the while statement below it!
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="title">
The Matheroo
</div>
<div id="sunYellow">
<!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later with some JAVA-->
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="correct">
Correct!
</div>
<div id="wrong">
Try Again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the Correct Answer
</div>
<div id="choices">
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="time-remaining">
Time Remaining: <span id="timer-down">60</span> sec
</div>
<div id="game-over">
</div>
</div>
<script src="Javascript.js"></script>
</body>
</html>
--------------------------------------
Here's the javascript:
`var gameOn = false;`
`var score;`
`var interval;`
//if we click on the start/reset
document.getElementById("startreset").onclick = function(){
//if we are playing
if(gameOn == true){
//reload page
location.reload(); //reload the page
}else{//if we are not playing
//change mode to playing
gameOn = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
document.getElementById("time-remaining").style.display = "block";
//reduce time by 1sec in loops
if(counter > 0){
var counter = 60;
interval = setInterval(timeIt, 100);
function timeIt(){
document.getElementById("timer-down").innerHTML = counter;
counter--;
}
}
while (document.getElementById("timer-down").innerHTML = 0){
document.getElementById("game-over").style.display = "block";
}
document.getElementById("startreset").innerHTML = "Reset Game";
}
}
--------------------------------------
And I don't know if it's to relevant but here's the CSS Stylesheet:
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
--------------------------------------

There were several things wrong with the code. Here is a cleaned up version.
var gameOn = false;
var score;
var interval;
function stopGame() {
gameOn = false;
if (interval) {
clearInterval(interval);
interval = null;
}
document.getElementById("startreset").innerHTML = "Start Game";
document.getElementById("time-remaining").style.display = "";
}
//if we click on the start/reset
document.getElementById("startreset").onclick = function () {
//if we are not playing
if (gameOn) {
stopGame();
} else {
//change mode to playing
gameOn = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
document.getElementById("time-remaining").style.display = "block";
document.getElementById("startreset").innerHTML = "Reset Game";
var counter = 60;
interval = setInterval(timeIt, 100);
function timeIt(){
document.getElementById("timer-down").innerHTML = counter;
counter--;
if ( counter === 0) {
stopGame();
document.getElementById("game-over").style.display = "block";
}
}
}
}
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
<div id="title">
The Matheroo
</div>
<div id="sunYellow">
<!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later ith some JAVA-->
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="correct">
Correct!
</div>
<div id="wrong">
Try Again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the Correct Answer
</div>
<div id="choices">
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="time-remaining">
Time Remaining: <span id="timer-down">60</span> sec
</div>
<div id="game-over">
Game Over
</div>
</div>
I added a function called stopGame that does everything to stop the game and call it from the correct locations.
I added code to change the text of the Start Game/Reset Game button which I assume you wanted.
This code still needs a lot to clean it up, but it is a good start.

If you check your while statement while (document.getElementById("timer-down").innerHTML = 0) you can notice you have innerHTML = 0 and it is wrong because with = you assign the value 0 to innerHTML. Instead you should use innerHTML == 0 where == is a comparison operator.

i think its abouth "=" :)
change this
while (document.getElementById("timer-down").innerHTML = 0)
to
while (document.getElementById("timer-down").innerHTML == 0 | document.getElementById("timer-down").innerHTML == '0')

This is a very simplistic implementation of a game loop. Personally, I'd use some library to help me out with the event listeners and use other events to propagate changes around. Doing to many things on tick is not very efficient and a waste of JavaScript's power.
But, hopefully, this will illustrate how you'd tackle some points for your game. It can also help you transition to a proper game engine in the future.
// This allows us to keep track
// of how much time has passed between each "tick"
var lastTimestamp = performance.now()
// This is the main loop.
// It leverages the `requestAnimationFrame` method
// to keep in sync with the browser's refresh rate
function loop(timestamp) {
window.requestAnimationFrame(loop)
var delta = timestamp - lastTimestamp
lastTimestamp = timestamp
var event = new CustomEvent('tick', {
detail: delta
})
document.dispatchEvent(event)
}
// Starting the main loop for the first time
loop(lastTimestamp)
// This is used to store game state
// Ideally, it should be somewhere more reliable
// than just a global variable
var gameData = {}
// When your game gets large enough,
// it'd be wise to split different aspects of it
// in different files.
// In this case, each "tick" event listener
// could be in a different file
document.addEventListener('tick', (event) =>{
var timer = document.getElementById('time-remaining')
var timeDown = document.getElementById('timer-down')
if (gameData.state === 'started'){
time = gameData.counter - event.detail
if (time < 0){
gameData.state = 'over'
} else {
timer.style.display = 'block'
timeDown.textContent = Math.floor(time / 1000)
gameData.counter = time
}
} else {
timer.style.display = 'none'
}
})
document.addEventListener('tick', (event) =>{
var startButton = document.getElementById('startreset')
if (gameData.state === 'started'){
startButton.style.display = 'none'
} else if (gameData.state === 'over') {
startButton.style.display = 'block'
startButton.innerHTML = 'Reset Game'
}
})
document.getElementById('startreset').onclick = function () {
gameData.state = 'started'
gameData.counter = 60 * 1000
}
document.addEventListener('tick', (event) =>{
var gameOver = document.getElementById('game-over')
if (gameData.state === 'over') {
gameOver.style.display = 'block'
} else {
gameOver.style.display = 'none'
}
})
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
<div id="title">The Matheroo</div>
<div id="sunYellow">
<div id="score">
Score:
<span id="scorevalue"></span>
</div>
<div id="correct">Correct!</div>
<div id="wrong">Try Again</div>
<div id="question"></div>
<div id="instruction">
Click on the correct answer
</div>
<div id="choices">
<div class="boxes" id="box1">1</div>
<div class="boxes" id="box2">2</div>
<div class="boxes" id="box3">3</div>
<div class="boxes" id="box4">4</div>
</div>
<div id="startreset">Start Game</div>
<div id="time-remaining">
Time remaining:
<span id="timer-down"></span> sec
</div>
<div id="game-over">Game Over</div>
</div>

CSS continue animation after mouseleave

Can someone please help me with css animation? Mb I should use js too?
I want to create hover animation left->right but after mouse leave, I want to continue animation left->right not right->left.
Thanks
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 100px 0 0 0 #31302B;
color: #FFF;
}
<button class="button_sliding_bg">
Button
</button>
I want something like this:
Here is the solution:
window.setTimeout(function() {
document.getElementById('btn').style.visibility = 'visible';
}, 400);
.button_sliding_bg {
visibility:hidden;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation: animate-out 0.5s 1;
animation-fill-mode:forwards;
}
.button_sliding_bg:hover {
animation: animate-in 0.5s 1;
animation-fill-mode:forwards;
}
#keyframes animate-in {
0% {
box-shadow: inset 0 0 0 0 #31302B;
color:#31302B;
background: #FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #31302B;
color:#FFF;
background: #FFF;
}
}
#keyframes animate-out {
0% {
box-shadow: inset 0 0 0 0 #FFF;
background: #31302B;
color:#FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #FFF;
background: #31302B;
color:#31302B;
}
}
<button id="btn" class="button_sliding_bg">
Button
</button>

If you dont mind that it runs the first when the page loads, you can use CSS3's animation properties to get what you're trying to achieve. The trick is the combination of changing the animation-name on hover and the use of animation-fill-mode to persist the changes made. Do keep in mind that CSS3's animation is considered "experimental", however, it has almost complete coverage on the latest browser versions.
JSFIDDLE
CSS
.button_sliding_bg {
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation-name: animate-out;
animation-duration: 0.5s;
animation-repeat-count: 1;
animation-fill-mode: forwards;
}
.button_sliding_bg:hover {
animation-name: animate-in;
}
#keyframes animate-in {
0% {
box-shadow: inset 0 0 0 0 #31302B;
color:#31302B;
background: #FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #31302B;
color:#FFF;
background: #FFF;
}
}
#keyframes animate-out {
0% {
box-shadow: inset 0 0 0 0 #FFF;
background: #31302B;
color:#FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #FFF;
background: #31302B;
color:#31302B;
}
}

toggling a link's activity on click using javascript

I have a question similar to this question Making a link stay active displaying hover effect upon click using javascript i just wanted to disable the active class when the link is clicked again any help would be appreciated
JSFiddle
HTML
<div id="profile_list">
<h2>Members: 37</h2>
• O.F.
• Founder
• Leader
• Sr. Admin
• Jr. Admin
• Full-Member
• Greenhorn
• Inactive
• Legend
</div>
JS
$('#profile_list a').click(function() {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
CSS
#profile_list {
width: 250px;
height: 328px;
background-color: #333;
background-image: -moz-linear-gradient(#777, #222);
background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
background-image: -webkit-linear-gradient(#777, #222);
background-image: -o-linear-gradient(#777, #222);
background-image: -ms-linear-gradient(#777, #222);
background-image: linear-gradient(#777, #222);
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
position: relative;
top: 20px;
left: 20px;
z-index: 2;
}
#profile_list h2 {
width: 226px;
height: 20px;
padding: 10px 0;
margin: 0 12px;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}
#profile_list a {
width: 218px;
height: 20px;
padding: 4px 12px 7px 20px;
color: #A4A4A4;
float: left;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-decoration: none;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
position: relative;
top: 5px;
}
#profile_list a:hover, #profile_list a.active {
background: rgba(204, 204, 204, 0.5);
-moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
color: #FFF;
}

Then do two checks, one to see if the clicked anchor is active already and another to see if any of that anchors siblings are active.
If it's already active, "deactive" it by removing the class.
If one of its siblings is active during the click, don't activate it.
If neither it nor its siblings are active, activate it.
JS
// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
// Set variables for this,
// Whether I am the active one,
// And if there are other active elements in this list
var a = $(this),
amIactive = a.hasClass('active'),
areOthersActive = a.parent().children().hasClass('active');
// If I'm active
if (amIactive) {
// Make me not active when I'm clicked
a.removeClass('active');
}
// Otherwise, if none of my siblings are active
else if(!areOthersActive){
// Make me active
a.addClass('active');
}
});
Forked fiddle with changes: jsfiddle

How can CSS/JavaScript create a push down effect on a click/mouseover event?

When you log into stackoverflow.com via gmail or similar., when you click on the gmail button, it appears to be pushed down.
How do you achieve this effect?
I know how to use CSS3 to make something look raised using a drop shadow. But how do you make it appear to move down.
It appears they are removing the shadow while at the same time shifting the div to the previous place of the shadow.
However I'd prefer a more continuous effect. I only need this to work in modern browsers.
Also, they are moving on a hover event, I need it on a click event.

Here is the CSS for the buttons. No JS is required.
.login-page .openid_large_btn {
width: 100px;
height: 60px;
border: 2px solid #DDD;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
margin: 3px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 2px 2px 4px #ddd;
-moz-box-shadow: 2px 2px 4px #ddd;
-webkit-box-shadow: 2px 2px 4px #ddd;
}
.login-page .openid_large_btn:hover {
margin: 4px 0px 0px 6px;
border: 2px solid #999;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
element.style {
background: #fff url(http://cdn.sstatic.net/Img/openid/openid-logos.png?v=8);
background-position: -1px -1px;
}
As observed above,
margin-top and left is increased, while the other sides are set to 0, from 3px:
margin: 4px 0px 0px 6px;
border is darkened:
border: 2px solid #999;
shadows are removed:
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

To add transitions, add this:
.login-page .openid_large_btn {
-webkit-transition: all 0.05s ease-in-out;
-moz-transition: all 0.05s ease-in-out;
-o-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;

We Keep Coding

JavaScript is the programming language of the Web.

Disabling CSS transition on box-shadow property - javascript

Related

Text gets out from its container

Why is my while loop overriding the if statement

CSS continue animation after mouseleave

toggling a link's activity on click using javascript

How can CSS/JavaScript create a push down effect on a click/mouseover event?

Categories

Resources