guys i'm struggling these days with understanding the toggle switch code i found this on google and i'm trying to understand the code to strengthen my css skills
please help me and thank you in advance.
1.why this person put the transition declaration when the toggle switcher can work without it ?
2.why we should use the adjacent combinator and not any other combinator? i tried the descendant combinator and it doesn't work i wanna know why?
this is the HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<label class="switch">
<input type="checkbox" class="input">
<span class="slider"></span>
</label>
</body>
</html>
and this is the CSS:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch .input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;*/
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
**i understand that here it's necessary for the cool effect of the transition but above i don't see why we used it?**
-webkit-transition: .4s;
transition: .4s;
}
.input:checked + .slider {
background-color: #2196F3;
}
.input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
.input:checked + .slider:before {
transform: translateX(26px);
}
1. The transition on the toggle
That's totally up to the person designing the site. If the code works fine without it then you're fine to remove it if that look/feel doesn't appeal to you.
2. Why the adjacent?
In this case using the adjacent combinator ensures that only the .input that belongs to .switch is going to be impacted by whatever styles are declared. This would be done in case the .input class is going to be called many other times throughout the page. The other instances of it would all retain the default styles for that class while the one within the .switch class would have the unique styles.
1. The transition declaration for .slider is used to transition its background-color property, it's a subtle effect that you may have not noticed.
2. The descendant combinator couldn't indeed work in that case as the .slider span is not a descendant of the checkbox, but adjacent to it. Another selector you could use in that case instead is the sibling ~ selector, with a similar result.
Related
I made a simple burger button using html and css, everything worked fine but I need to include bootstrap for alignements and all in my project and that's messing my css somehow.
without including bootstrap
After including bootstrap
I tried including bootstrap before my css stylesheet so that it doesn't overwride it but it didn't work.
here's my code:
HTML
<button class="menuButton">
<div class="buttonContainer">
<span></span>
<span id="midspan"></span>
<span></span>
</div>
</button>
CSS
.menuButton{
margin: 0;
padding: 0;
border: none;
width: 0vmin;
overflow: hidden;
background-color: transparent;
animation: buttonAnim 0.75s forwards;
animation-delay: 0.5s;
float: right;
}
#keyframes buttonAnim {
100%{
width:3vmin;
right: 0;
}
}
.menuButton span{
width: 3vmin;
height: 0.2vmin;
margin-bottom: 0.5vmin;
margin-top: 0.5vmin;
display: block;
background-color: coral;
}
.buttonContainer{
width: 3vmin;
}
#midspan {
transform: translate(1vmin, 0);
transition: transform 0.3s ease;
}
.menuButton:hover {
cursor: pointer;
}
.menuButton:hover #midspan{
transform: translate(0);
}
This is happening because the default bootstrap.css file overrides default styles on various HTML elements.
If you just want to have a responsive grid layout with no styles you can include Bootstrap's CSS grid layout file bootstrap-grid.css or bootstrap-grid.min.css in your HTML, and that should do the trick:
<link rel="stylesheet" href="css/bootstrap-grid.css">
You can find these inside their "compiled package" available to download here.
Note: This zip file contains a lot of files, just use bootstrap-grid.css or bootstrap-grid.min.css.
<span id="priority-dot-open-menu">
<span id="priority-menu">
<span class="tooltip-top"></span>
<span id="priority-dot-blue"></span>
<span id="priority-dot-yellow"></span>
<span id="priority-dot-red"></span>
</span>
</span>
/* The popup menu - hidden by default */
#priority-menu {
display: none;
position: absolute;
top: 150%;
left: -50%;
border: 3px solid #f1f1f1;
z-index: 9;
max-width: 300px;
padding: 10px;
background-color: white;
}
#priority-dot-open-menu {
position: relative;
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
#priority-dot-open-menu:hover {
opacity: 1;
}
My #priority-menu (column with the 3 dots) is a child of the dot above (#priority-dot-open-menu). I need it to be so I can use absolute positioning. However it's also inheriting certain properties/values, like opacity and hovering which I don't want to. What would be the ideal solution?
https://jsfiddle.net/moq2bwLj/ (the menu doesn't open on js fiddle, it's just for code-viewing purposes. Thanks!
Child elements in CSS automatically inherit the rules applied to their parents; there is nothing you can do to prevent this. What you can do, however, is to override this behaviour by crafting a rule that targets the child, changing it to the initial value:
#priority-menu {
cursor: initial;
opacity: initial;
}
I have an element whose width I'd like to animate when its contents change. It has width: auto, and this never changes. I've seen this trick, but that's for transitioning between two values and one is set. I'm not manipulating the values at all, only the content, and I'd like my element's size to change with animation. Is this at all possible in CSS?
Here's a simplified version of my code:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>
I'd like the changing size to animate when the user hovers over the element.
As I commented, one can't animate auto (yet), so either use the max-width/max-height trick, or, if you need it to be more exact, set the width using a script.
With the max-width/max-height trick, give it a value big enough to accommodate the widest.
Stack snippet
.myspan {
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
}
.myspan::after {
content: " \00a0\f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
}
.myspan:hover::after {
max-width: 80px;
transition: max-width 1s;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>
I think it's useful
const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) => {
e.target.nextElementSibling.classList.toggle("active");
}
ul {
background-color: yellow;
overflow: hidden;
transition-duration: 1s;
transition-property: max-height;
height: auto;
max-height: 0;
}
ul.active {
max-height: 600px;
}
<button id="expand-btn">Expand</button>
<ul>
<li>Hihi</li>
<li>Hello</li>
<li>Rap star</li>
<li>Hiphop</li>
</ul>
I have an image gallery sliding images in an out only with css.
See http://codepen.io/anon/pen/xmhzE?editors=110 for the example or the attached code.
It works fine as long as the #images-div does not have overflow: hidden set. When overflow is set to hidden, the absolute positioning of the single images does not work anymore. When I use negative values for the left-property of the images it also works with overflow hidden.
Does overflow:hidden change the way how absolute children are layouted?
Does anyone has a solution to this problem?
Sources
index.html:
<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
base.css:
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
/*overflow: hidden; if this is set absolute positioning of images breaks*/
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
This puzzle kept me going. I just couldn't leave it be.
So last evening I was fiddling with it, but couldn't fix it (untill just yet :) ).
Testcase 1
While simplifying things I removed the opacity from the image-elements and left only 1 image and one link. I've set the image to 390px initially so that I can make sure that it is at that position (you can see just a little bit of the left of it).
http://codepen.io/anon/pen/tpCrc
Conclusion:
So what's important to notice is that fact that the image initially is there where it should be.
Then when clicking button 1 you can see it simply skips the transition.
So the browser doesn't change the position of the element, because of overflow:hidden (like the title of this post suggests). It goes to the position mentioned in the CSS (in the :target part), but without the transition.
Testcase 2
Then I got wondering why the browser would act that way and I kept thinking that maybe the focussing of the image element had something to do with it.
If you think about it: when clicking one of the buttons you add #target to the URL of the page and browser then tries to "scroll" to that element. To that, that element has to be visisble.
So I wondered: maybe the CSS has nothing to do with it. Let's try:
so I completely removed the :target-part and the transitions.
http://codepen.io/anon/pen/IvfBE
Conclusion:
Wow! What do we see there? When clicking one of the buttons the image still jumps to left:0 !!
I think we got a lead there.
Still though, I didn't know how to actually fix that. Still seems like a browser-bug to me.
The fix
Then - after a good night of sleep - I woke up with a fresh new idea.
What if we don't actually target the element we want to transition?
So I added a container to each image-element and target that instead.
<div id="images">
<div id="img1container"><img id="image1" src="http://i.imgur.com/dL3io.jpg" /></div>
<div id="img2container"><img id="image2" src="http://i.imgur.com/qASVX.jpg" /></div>
<div id="img3container"><img id="image3" src="http://i.imgur.com/fLuHO.jpg" /></div>
<div id="img4container"><img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" /></div>
</div>
<div id="slider">
1
2
3
4
</div>
In the CSS the position of the image now has to be changed by "[parentElement]:target img" instead.
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
overflow: hidden; /* this did break it in the past ;) */
position: relative;
background-color: red;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
display: block;
position: absolute;
top: 0px;
left: 400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images div:target img {
top: 0px;
left: 0px;
z-index: 9;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
And the working example:
http://codepen.io/anon/pen/lyzhi
Conclusion:
Yay!! Indeed, by not putting focus on the element you want to transition, it doesn't break.
So, you've got your fix there, but it still seems like a browser/engine-bug to me.
So I'd suggest you create a bugreport somewhere (if you've got time).
BTW: I've tested this in Chrome and IE - both the latest versions only. You might want to test this in Firefox and maybe some other browsers.
I have the following code :
<!DOCTYPE html>
<html>
<head>
<title>Void Museum</title>
<meta charset="utf-8">
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
#panel,
#content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: -220px;
width: 250px;
background: #030;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#content {
left: 250px;
right: 0;
background: #003;
}
#panel:target {
left: 0;
background: red;
}
#content:target {
background: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="panel">
LEFT PANEL
</div>
<div id="content">
CONTENT
</div>
</body>
</html>
And two questions :
Why isn't the panel coming out when i click on it ?
How could i force the #content block's left property to 250px when #panel is targeted ? Should i change all this to use relative positions ? If so, how would i force #content not to overflow of the right side of the page ?
This code does work when i use :hover instead of :target so i assume there's something i don't understand about :target.
Thanks in advance :)
The reason it isn't working is because you are using :target as "is-clicked" or similar, which doesn't exist. In CSS, something that can mimic that behaviour is the following:
You make a href to an id (e.g. #panel) and then click it. Now you have a #panel on your url and can start using :target
See here
The text links to #panel, activating :target and allowing it to work as if it was "clicked".