I'm really confused why it is not working. I am using styled-components library and actually I've got a problem with hamburger menu. It changes only when the checkbox is shown. It should work with only css but its not do have any suggestions?
const HamburgerCnt = styled.div`
cursor: pointer;
position: absolute;
top: 35px;
right: 41px;
height: 28px;
width: 30px;
input {
display: none;
}
input + label {
position: absolute;
top: 12px;
right: 0px;
width: 30px;
height: 2px;
background: #fff;
display: block;
transform-origin: center;
transition: .5s ease-in-out;
&:after,
&:before {
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #fff;
}
&:before {
top: -10px;
}
&:after {
bottom: -10px;
}
}
input:checked + label {
transform: rotate(45deg);
&:after {
transform: rotate(90deg);
bottom: 0;
}
&:before {
transform: rotate(90deg);
top: 0;
}
}
`;
and Component looks like this
<HamburgerCnt>
<input type="checkbox" name="check" />
<label htmlFor="check" />
</HamburgerCnt>
You should use check as id of the input, not its name.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute
Related
The below code makes the before content flow outside the button itself. what should I do to contain it within the button
I need a parameter that fits the before content inside the button itself........................................................................................................................................................................
===================================================
button {
padding: 0.9em 2em;
border: 2px solid #17C3B2;
position: absolute;
background-color: transparent;
text-align: center;
text-transform: uppercase;
font-size: 16px;
color: #ddd;
transition: .3s;
display: block;
font-family: inherit;
color: #17C3B2;
z-index: 1;
}
button::before {
overflow: hidden;
content: '';
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
background: #17C3B2;
transition: .5s ease;
display: block;
z-index: ;
}
button span {
position: absolute;
left: 0;
top: 0;
width: 10%;
height: 10%;
background: transparent;
z-index: 1;
}
button span::before {
content: "";
display: block;
position: absolute;
width: 8%;
height: 500%;
background: var(--lightgray);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-60deg);
transition: all 0.3s;
}
button:hover::before {
position: absolute;
transform: translate(-50%, -50%) rotate(44deg);
width: 100%;
}
button:hover {
color: #111;
}
<button>hover me
<span></span>
</button>
i have added overflow: hidden; to the button and z-index: -1; to button:hover::before
button {
padding: 0.9em 2em;
border: 2px solid #17C3B2;
position: absolute;
background-color: transparent;
text-align: center;
text-transform: uppercase;
font-size: 16px;
color: #ddd;
transition: .3s;
display: block;
font-family: inherit;
color: #17C3B2;
z-index: 1;
overflow: hidden;
}
button::before {
overflow: hidden;
content: '';
width: 0;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
background: #17C3B2;
transition: .5s ease;
display: block;
z-index: ;
}
button span {
position: absolute;
left: 0;
top: 0;
width: 10%;
height: 10%;
background: transparent;
z-index: 1;
}
button span::before {
content: "";
display: block;
position: absolute;
width: 8%;
height: 500%;
background: var(--lightgray);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-60deg);
transition: all 0.3s;
}
button:hover::before {
position: absolute;
transform: translate(-50%, -50%) rotate(44deg);
width: 100%;
z-index: -1;
}
button:hover {
color: #111;
}
<button>hover me
<span></span>
</button>
I've got the following CSS and HTML. The problem is, that when the mouse is moved over the button, the red rectangle flashes to the center instead of smoothly moving to the center. It is strange because when the mouse is moved away from the button, it moves back slowly. How can I make the red rectangle move to the center smooth?
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
bottom: -10px;
right: -10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
For some reason, it didn't work with bottom: -10px and right: -10px. I'm not sure if this has to do with my code or if this is a browser problem, but the easy fix is to use the top and left properties instead:
.btn {
position: relative;
display: inline-block;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
top: -10px;
left: -10px;
}
.btn .bottom-right {
top: 10px;
left: 10px;
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='btn'>
<span class='btn-text'>button</span>
<div class='rect top-left blue-translucent'></div>
<div class='rect bottom-right red-translucent'></div>
</div>
.red-translucent {
background-color: red;
top: 10px;
left: 10px;
}
Use transform instead of top, left, bottom, right like this:
.btn {
position: relative;
display: flex;
padding: 30px 45px;
margin: 80px;
cursor: pointer;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
}
.btn .rect {
transition: all 0.5s linear;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
}
.btn .top-left {
transform: translate(-10px, -10px);
}
.btn .bottom-right {
transform: translate(10px, 10px);
}
.red-translucent {
background-color: red;
}
.blue-translucent {
background-color: blue;
}
.btn-text {
z-index: 99999;
position: relative;
font-family: Arial;
}
.btn:hover .rect {
transform: translate(0px, 0px);
}
This will work smoothly on either the move-in or move-out of the pointer.
I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
I'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
I've made a toggle with the following CSS:
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Span needs to have an image inside, and when is checked another image, it should look like this:
Need to achieve this with CSS/React.
I was able to make something out:
* {
font-family: 'Open Sans', 'Segoe UI';
}
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-image: url('https://i.imgur.com/J4GQTYs.png');
background-size: contain;
border-radius: 50%;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://i.imgur.com/Q0iHcOX.png');
}
input:checked ~ .unchecked,
input ~ .unchecked,
input ~ .checked {
position: absolute;
font-weight: 600;
display: none;
top: 1px;
}
.unchecked {
right: 5px;
}
.checked {
left: 5px;
}
input:checked ~ .checked,
input ~ .unchecked {
display: block;
}
<label class="switch">
<input type="checkbox" />
<span class="slider round"></span>
<span class="checked">FR</span>
<span class="unchecked">EN</span>
</label>
You can add:
background-image: url(IMAGE); for the image and background-size: contain; to make it visiable. Only using the background-image property won't work.
I added them to your example to: slider:before {} and input:checked + .slider:before {} to get the effect you're looking for. I've used different images as you stated as I couldn't find them so quickly. But of course you can just edit the url to the images you prefer (please don't use external images as I did in this example, add them to your server).
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 34px;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 50%;
-webkit-transition: .2s;
transition: .2s;
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/italy-512.png');
background-size: contain;
}
input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
background-image: url('https://cdn1.iconfinder.com/data/icons/european-country-flags/83/france-512.png');
background-size: contain;
}
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>