* {
box-sizing: border-box;
}
.btn-option {
width: 330px;
padding: 12px 24px;
margin: auto;
border-radius: 8px;
background-color: transparent;
color: #4c4c4c;
visibility: visible;
border: 1px solid #d2d2d2;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 1px;
font-family: "Lato", sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
/* transition */
transition: filter 0.3s ease 0.3s;
}
.survey-checkbox {
position: relative;
}
.survey-checkbox::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background: #efefef;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.option-container {
margin: auto;
display: flex;
flex-direction: column;
row-gap: 20px;
flex-wrap: wrap;
}
#media only screen and (max-width: 768px) {
.btn-option {
width: 280px;
}
}
.btn-option:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}
.btn-option:active {
background: #fcece8;
border: 1px solid #e76943;
}
.btn-option:active .survey-checkbox::before {
background-color: #e76943;
}
.btn-option:not(:active) {
transition: all 1000ms step-end;
}
.survey-checkbox::before:active {
background-color: #e76943;
}
.btn-option:active {
animation: all 1s forwards linear;
}
<!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="./index.css" />
<title>Document</title>
</head>
<body>
<div
class="btn btn-option">
<span>Good</span><input type="checkbox" class="survey-checkbox" />
</div>
</body>
</html>
Guys I want to Animate the Checkbox on clicking the parent div right now the problem is as I'm clicking on the parent div it's working fine as expected but the checkbox is working till the active state is there how can I make it transition same like the div.
To make the Div animate on active state I followed an article
Related
i use firefox as default browser and i never had problem with animations and css in general everything worked fine, but i noticed that in chrome if i have hover effect that has more than one animation, in chrome animations happen in order instead of simultaneously. how can i fix that problem? also the input slider i tried to make it vertical ( works fine in firefox but in chrome it doesn't work at all.
here is the github pages of the page
* {
box-sizing: border-box;
user-select: none;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #bf42f5;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
canvas {
opacity: 0;
touch-action: none;
animation: fade-in 1s ease 0.5s forwards;
}
.nav{
position: fixed;
opacity: 1;
z-index: 10;
top: 0px;
left: 0px;
min-width: 100%;
}
.nav-list{
list-style: none;
font-size: 1.6rem;
font-family: 'Courier New', Courier, monospace;
color: #f0f0f0;
display: flex;
justify-content: center;
padding: 0;
}
.nav-list>li{
padding-right: 10px;
opacity: 0.8;
}
.nav-list>li:hover{
transition: all 0.4s ease;
opacity: 1;
cursor: pointer;
scale: 1.11;
padding-bottom: 100px;
}
#media (max-width:480px) {
.nav-list{
flex-direction: column;
align-items: flex-end;
/* transform: translateX(1000px); */
}
.nav-list>li{
padding-left: 5px;
}
.nav-list>li:hover{
padding-top:5px;
padding-bottom:5px;
padding-left: 15px;
scale: 1.05;
}
}
/*slider*/
.boring-text{
position: fixed;
left: 5%;
top: 25%;
}
.boring-text>h1{
font-size: clamp(2rem, 10vw, 5rem);
font-family: 'Sono', sans-serif;
color: #ffffff9a;
pointer-events: none;
font-weight: 200;
max-width: 5ch;
}
.boring-text>h3{
font-family: 'Marhey', cursive;
color: #ffffff92;
position: fixed;
right: 10px;
bottom: 5%;
}
.boring-text>h4{
font-family: 'Sono', sans-serif;
color: #ffffffba;
}
.slider-wrapper{
position: fixed;
right: 20px;
bottom: 10%;
}
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
-webkit-appearance: none;
width: 5px;
height: 255px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
/*slider*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Marhey:wght#300;400&family=Sono:wght#200;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>LandingPAGE</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class='nav'>
<div class='nav-wrapper'>
<ul class='nav-list'>
<li>Shop</li>
<li>Work</li>
<li>
apple{/* <FontAwesomeIcon icon="apple" /> */}
</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class='boring-text'>
<h1> boring landing pages</h1>
<h3> phones: {val}</h3>
<h4> React - Three</h4>
<div class='slider-wrapper'>
<input type="range" orient="vertical" min="1" max="50" value='10' class='slider' />
</div>
</div>
</div>
</body>
</html>
About the slider you can check this answer, it may help you.
About the animations I'm waiting for further information as I reproduce it on your snippet I'm seeing it working well and concurrently.
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
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 1 year ago.
I was learning from youtube and I ended up at transition bcs of my problem with one.
Any delay or duration is not workig and I don't know why. I really want to know what is a reason of executing this problem. I'm kinda of new in that stuff. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<script>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: auto;
}
</script>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
First off, you need to include your css in a style tag if you need to inline it. Also, when you use width: auto, it will just have the browser calculate a width and set it for you. You are best off just setting the width to 100% and it will try to take up the whole space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: 100%;
}
</style>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
I can't seem to find what I am doing wrong here. The transform:translate property is causing a bad effect when the element is hovered.
Please look at this codepen.
https://codepen.io/kuromicho/pen/LYxrQPv
CSS
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: block;
width:50%;
float: left;
border: 1px solid red;
}
.big-icon {
position: relative;
left: 50%;
transform: translateX(-50%);
transition: scale 0.2s;
}
.big-icon {
font-size: 300%;
color: #e67e22;
}
.big-icon:hover {
transform: scale(1.15);
}
HTML:
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<div class="row">
<div class="col">
<ion-icon name="infinite-sharp" class="big-icon"></ion-icon>
</div>
<div class="col">
<ion-icon name="cart-sharp" class="big-icon"></ion-icon>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/ionicons#5.4.0/dist/ionicons.js"></script>
</html>
I don't know why you defined big-icon class twice in your CSS, but this is my fixes in the bottom of CSS file, take a closer look at those lines of CSS I commented/deleted:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100vh;
}
body {
font-size: 20px;
font-family: "Lato", "Arial", sans-serif;
font-weight: 400;
}
.row {
max-width: 600px;
margin: 0 auto;
border: 1px solid black;
}
.col {
display: flex;
justify-content: center;
width: 50%;
/* float: left; */
border: 1px solid red;
}
.big-icon {
/* position: relative; */
/* left: 50%; */
font-size: 300%;
color: #e67e22;
/* transform: translateX(-50%); */
transition: transform 0.2s ease;
}
.big-icon:hover {
transform: scale(1.15);
}
I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
-> please update css into your css file
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
overflow: hidden;
transition: transform .2s;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
Use a background-image:inherit on the inner div and leverage background-size on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
width: 860px;
height: 480px;
background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
;
}
.zoomer {
width: 80%;
height: 80%;
background: inherit;
border: 3px solid blue;
background-size: 125% 125%;
transition: background-size .5s ease;
background-position: center center;
}
.zoomer:hover {
background-size: 150% 150%;
}
<div class="map">
<div class="zoomer"></div>
</div>