I'm trying to build a input ranged slider bar. But I'm facing a problem.
body {
justify-content: center;
align-items: center;
min-height: 100vh;
background: #151515;
}
#rangeValue {
position: relative;
display: block;
font-size: 6em;
color: #999;
font-weight: 400;
}
.range {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
width: 400px;
height: 5px;
-webkit-appearance: none;
background: #111;
outline: none;
border-radius: 15px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: blue;
cursor: pointer;
box-shadow: -507px 0 0 500px red;
}
<div>
<span id="rangeValue">0</span>
<Input class="range" type="range" name "" value="0" min="0" max="1000"></Input>
</div>
The problem is: I want this big red area stay inside the input slider, even while drawing. The only solution is apply overflow: hidden to .range, but I'll lose the blue dot button.
Is there a way to fix this applying overflow: hidden just to box-shadow? Or any other clue to make it works properly?
The final result shoud be something like this =>
Thank you.
I am not sure if this will help. but here is a refactoring I did. maybe you can do some changes to fit your task.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Slider</title>
</head>
<body>
<div>
<span id="rangeValue">0</span>
<Input type="range" name="" id="range" value="0" min="0" max="100"></Input>
</div>
</body>
<script src=""></script>
</html>
CSS
body {
justify-content: center;
align-items: center;
min-height: 100vh;
background: #151515;
}
#rangeValue {
position: relative;
display: block;
font-size: 6em;
color: #999;
font-weight: 400;
}
/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
cursor: ew-resize;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
cursor: ew-resize;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
input[type="range"]::-ms-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #ff4500;
cursor: ew-resize;
box-shadow: 0 0 2px 0 #555;
transition: background .3s ease-in-out;
}
/* Input Track */
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
input[type=range]::-moz-range-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
JS
const rangeInputs = document.querySelectorAll('input[type="range"]')
function handleInputChange(e) {
let target = e.target
if (e.target.type !== 'range') {
target = document.getElementById('range')
}
const min = target.min
const max = target.max
const val = target.value
target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
}
rangeInputs.forEach(input => {
input.addEventListener('input', handleInputChange)
})
You can tweak it to your liking.
I hope this helps
Related
I was learning how to make a recipe-app on youtube with Javascript, then I finished it, but there is a problem, the app I was learning how to make has a function that when you click on an image it shows the recipe info but the info screen was too big for my pc, like it overflows and I couldn't click on the button (which is an X) to close the image and the person I was watching to learn on how to make this app managed to put a scroll bar on the images while I did EVERYTHING he did, the scroll bar didn't show up for me. and when I tried to adjust the size of the image info it only affected the sides while the top and bottom were unaffected (the sides were too thin and that made the image and text compressed and that gave it a bad apparence).
Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Recipes App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="mobile-container">
<header>
<input type="text" id="search-term" />
<button id="search"><i class="fas fa-search"></i></button>
</header>
<div class="fav-container">
<h3>Favorite Meals</h3>
<ul class="fav-meals" id="fav-meals"></ul>
</div>
<div class="meals" id="meals"></div>
</div>
<div class="popup-container hidden" id="meal-popup">
<div class="popup">
<button id="close-popup" class="close-popup"><i class="fas fa-times"></i></button>
<div class="meal-info" id="meal-info"></div>
</div>
</div>
</body>
</html>
Here is the CSS/Style Code (the popup part is the image that overflows):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
img {
max-width: 100%;
}
.mobile-container {
background-color: #fff;
box-shadow: 0 0 10px 2px #3333331a;
border-radius: 3px;
overflow: hidden;
width: 400px;
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
header input {
background-color: #eee;
border: none;
border-radius: 3px;
font-family: inherit;
padding: 0.5rem 1rem;
}
header button {
background-color: transparent;
border: none;
color: #aaa;
font-size: 1.5rem;
margin-left: 10px;
}
.fav-container {
background-color: #cc444494;
padding: 0.25rem 1rem;
text-align: center;
}
.fav-meals {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}
.fav-meals li { /* O position: relative; coloca o botão perto da foto da receita */
cursor: pointer;
position: relative;
margin: 5px;
width: 75px;
}
.fav-meals li .clear { /* Esse é para o botão de deletar as receitas da lista de favoritos */
background-color: transparent;
border: none;
cursor: pointer;
opacity: 0;
position: absolute;
top: -0.5rem;
right: -0.5rem;
font-size: 1.2rem;
}
.fav-meals li:hover .clear { /* O :hover é para quando você passar o cursor do mouse em cima de algo */
opacity: 1;
}
.fav-meals li img {
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 10px 2px #3333331a;
object-fit: cover;
height: 70px;
width: 70px;
}
.fav-meals li span {
display: inline-block;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
}
.meal {
border-radius: 3px;
box-shadow: 0 0 10px 2px #3333331a;
cursor: pointer;
margin: 1.5rem;
overflow: hidden;
}
.meal-header {
position: relative;
}
.meal-header .random {
position: absolute;
top: 1rem;
background-color: #fff;
padding: 0.25rem 1rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.meal-header img {
object-fit: cover;
height: 250px;
width: 100%;
}
.meal-body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.meal-body h4 {
margin: 0;
}
.meal-body .fav-btn {
border: none;
background-color: transparent;
color: #cecaca;
cursor: pointer;
font-size: 1.2rem;
}
.meal-body .fav-btn.active {
color: crimson;
}
.popup-container {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.popup-container.hidden {
opacity: 0;
pointer-events: none;
}
.popup {
background-color: #fff;
border-radius: 5px;
padding: 0 2rem;
position: relative;
overflow: auto;
margin: 2rem;
max-width: 100vh;
max-width: 500px;
width: 100%;
}
.popup .close-popup {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
position: absolute;
top: 1rem;
right: 1rem;
}
.meal-info h1 {
text-align: center;
}
In .popup you have two max-width rules - I believe one of them is meant to be max-height, because height have to be specified along with overflow: auto.
Nonetheless, a useful suggestion - most tutorial videos have a link to source code. You can look there if something else is missed and not shown in the video.
I came up with such a way to style the input type="range" through a linear-gradient, but when the variable is set to 75%, it is not behaving correctly, how can I fix it?
body{
background: green;
}
.wrapper {
width: 20vmin;
}
input {
width: 100%;
--litters-range: 75%;
appearance: none;
outline: none;
height: 1vmin;
border-radius: 0.5vmin;
background: linear-gradient(
to left,
rgba(87, 87, 87, 0.46) calc(100% - var(--litters-range)),
white var(--litters-range)
);
}
input::-webkit-slider-thumb {
cursor: pointer;
appearance: none;
width: 2vmin;
height: 2vmin;
background: white;
border-radius: 50%;
}
// 25% works correctly but 75% not
<div class="wrapper">
<input type="range" />
</div>
You are making a mistake with your stop/start value, they could be the same and be set from left to right.
Also, you need to update that var() via javaScript, CSS cannot do it for you.
Possible example (use console.log() to check what happens) then remove or comment it):
var val = document.querySelector('.wrapper input[type="range"]');
let range = val.value;
val.addEventListener("input", function() { // onchange ...
let range = val.value + '%';
console.log(range);
val.style.setProperty("--litters-range", range);
});
body {
background: green;
}
.wrapper {
width: 20vmin;
}
input {
width: 100%;
--litters-range: 75%;
appearance: none;
outline: none;
height: 1vmin;
border-radius: 0.5vmin;
background: linear-gradient( to right, white var(--litters-range), rgba(87, 87, 87, 0.46) var(--litters-range));
}
input::-webkit-slider-thumb {
cursor: pointer;
appearance: none;
width: 2vmin;
height: 2vmin;
background: white;
border-radius: 50%;
}
<div class="wrapper">
<input type="range" value="75" />
</div>
I would do like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background-color: black;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}
</style>
</head>
<body>
<h1>Range Slider</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
My social network , faq and where to buy's link is arrange inside footer section but it cannot stick it at bottom of my page , and i feel my HTML structure very weird can anyone help me on this ? Thank you
I want it to be like this with the FAQ and Where to Buy at the left bottom , social network logo at right bottom of the page and LOGO in the middle of 4 navigation linkOutput that i want
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
position: relative;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
position: relative;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
position: relative;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
position: absolute;
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
position: absolute;
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
position: relative;
float: left;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="HomeCSS.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" />
<script src="GTech.js"></script>
</head>
<div id="page">
<body>
<header>
<img class="logo" src="Images/17622275_1491915637509717_1227569229_o.png" width="250" height="250" />
<div class="mainnav">
<button style="height:20px;width:120px;margin-left:90px">Notice</button>
<button class="divider" style="height:20px;width:120px">Products</button>
<div class="dropdown">
<button id="svc" style="height:20px;width:120px">Services</button>
<div id="submenu">
Help Center
<hr />
Service Center
</div>
</div>
<button class="divider2" style="height:20px;width:120px">About Us</button>
</div>
</header>
<div id="cart" class="scart">
<span onclick="openNav()">Shopping Cart</span>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
</body>
<footer>
<div class="btmcontainer">
<div class="faqwtb">
<span>FAQ</span>
<span>Where to Buy</span>
</div>
<div class="btmcol">
<ul class="social">
<li>
<img src="Images/footericon/facebook.png" />
</li>
<li>
<img src="Images/footericon/twitter.png" />
</li>
<li>
<img src="Images/footericon/google+.png" />
</li>
<li>
<img src="Images/footericon/tumblr.png" />
</li>
</ul>
</div>
</div>
</footer>
</div>
</html>
Change your CSS to this...
You have used position relative everywhere. Remove them. Get the position of footer in the correct place and then position your page components.
Check my fiddle: https://jsfiddle.net/mpriyam/s8xhr5wv/
CSS Should be...
body {
background-image: url(Images/Clean-Gray-BackGround-620x465.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#page {
margin: 0px auto;
width: 1200px;
}
header {
height: 20px;
margin: 30px 0 0;
}
.mainnav {
padding-top: 50px;
width: 1200px;
}
button {
font-size: 20px;
font-family: 'Bungee';
text-align: center;
border: none;
background-color: transparent;
padding: 16px 16px 40px 0px;
}
.dropdown {
display: inline-block;
}
.divider {
margin-left: 100px;
margin-right: 260px;
}
.divider2 {
margin-left: 150px;
}
#submenu {
display: none;
background-color: transparen;
text-align: center;
min-width: 60px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
#submenu a {
color: black;
padding: 0 0 40 0;
text-decoration: none;
display: block;
}
.dropdown:hover #submenu {
display: block;
}
.logo {
left: 45%;
margin: -48px 0 0 -98px;
}
#cart a {
/* Position them relative to the browser window */
right: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: black;
/* White text color */
background-color: white;
border-radius: 15px 0px 0px 15px;
}
#cart a:hover {
right: 0;
text-decoration: none;
}
.sidenav {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s;
/* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
color: blanchedalmond;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
.btmcontainer {
max-width: 1200px;
clear:both;
margin: 0 auto;
}
.social li {
float: right;
display: inline;
list-style: none;
}
.faqwtb a {
color: black;
padding-top: 50rem;
background-color: white;
padding: 20px;
text-decoration: none;
border-radius: 25px 25px 25px 25px;
}
Currently I am building a simon game clone and I thought I'd like to modernize a bit.
Anyway, I was able to find a blog on how to make toggle switch with only CSS3 (http://callmenick.com/post/css-toggle-switch-examples)
However, since I am trying to make this web responsive, I made the container (label) with width : 100%.
I am having hard time figuring out how to make the toggle switch itself move towards the end of the container at any width viewport.
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
background: orange;
width: 33.3333%; }
.control-panel #start {
background: purple;
width: 33.3333%; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 20px; }
#media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" charset="utf-8"></script>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="cmn-toggle-1"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="cmn-toggle-1"></label>
<p>Off/On</p>
</div>
<div id="level"></div>
<div id="start"></div>
</div>
</div>
</body>
</html>
To achieve your expected result, use below option
Change margin-left:20px to 90% to work as expected
input.cmn-toggle-round:checked + label:after {
margin-left: 90%;
}
http://codepen.io/nagasai/pen/jAYojX
I'm trying to implement a CSS-only modal box with animation onto my website. It works perfectly on this Codepen I found: http://codepen.io/petebot/pen/DBvKj
But I can't test or customize this code on my website because it doesn't work on an HTML page.
What am I missing here?
Here's the HTML page:
<html>
<head>
<title></title>
<style>
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
.transition (#time: .5s, #range: all, #ease: ease-out) {
-moz-transition: #range #time #ease;
-webkit-transition: #range #time #ease;
-o-transition: #range #time #ease;
transition: #range #time #ease;
}
.transition-delay (#time: .4s) {
-webkit-transition-delay: #time;
-moz-transition-delay: #time;
-o-transition-delay: #time;
-transition-delay: #time;
}
.border-radius(#radius) {
-moz-border-radius:#radius;
-webkit-border-radius:#radius;
border-radius: #radius;
}
.gradient (#coler1: #fff, #coler2: #ccc) {
background: #coler1;
background: -moz-linear-gradient(#coler1, #coler2);
background: -webkit-linear-gradient(#coler1, #coler2);
background: -o-linear-gradient(#coler1, #coler2);
}
.box-shadow(#dims:0 0 10px, #color:#000) {
box-shadow: #dims #color; // Opera, FFX4
-moz-box-shadow:#dims #color; // FFX3.5
-webkit-box-shadow:#dims #color; // Safari/Chrome/WebKit
.ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", #color)); }
}
.inset(#dims:1px 1px 1px, #color:#fff) {
box-shadow: #dims #color; // Opera, FFX4
-moz-box-shadow:#dims #color; // FFX3.5
-webkit-box-shadow:#dims #color; // Safari/Chrome/WebKit
}
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 40px auto;
font-size: 72px;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 20px 70px 30px;
position: relative;
top: 50px;
background: #eee;
width: 300px;
display: block;
text-align: center;
.inset;
.border-radius(5px);
.transition;
&:hover{ color: #333; background: #eeffff; .transition;}
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0);
z-index: 99999;
.transition(2s);
.transition-delay(.2s);
display: block;
pointer-events: none;
.dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
.border-radius(10px);
.gradient;
.box-shadow;
}
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10 ,30, .8);
.transition();
.dialog {
top: -20px;
.transition(.8s);
.transition-delay;
}
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
.box-shadow;
.transition;
.transition-delay(.2s);
&:hover { background: #00d9ff; .transition; }
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a { color: #333; text-decoration: none; }
</style>
</head>
<body>
<a class="button" href="#openModal">Open it up!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
X
<h2>Holy Crap!!!</h2>
<p>You freakin' did it!</p>
<p>You opened up the freakin' modal window! Now close it, ya dingus.</p>
<p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at Webdesigner Depot</p>
<p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>
</div>
</div>
</body>
</html>
The problem is that you have the styles in LESS format. LESS is a CSS pre-processor. Is not supported natively by the browser. You should compile your LESS styles to CSS and then add those styles to your page.
In codepen the code works because the CSS panel is configured to use LESS but is just a codepen feature, sadly you can't do it for your site / page.
Check out LESS docs to see how to compile it to a valid CSS.
Try this to get the compiled css
Click on the settings button just beside the css tab.
Then click on Analyze css and then on Clear css errors.
You will now have the compiled css.
Use this css on the html file.