Results preview
Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.
https://codepen.io/comehope/pen/PdMyJd
Interactive video
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
https://scrimba.com/p/pEgDAM/c648Nu7
Source code download
Daily front-end combat series full source code can be downloaded from github:
https://github.com/comehope/front-end-daily-challenges
Code Reading
Defined dom, comprising three elements, representing the input
controls, switches and lights:
<input type="checkbox" class="toggle">
<div class="switch"></div>
<div class="light"></div>
Centered:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
}
Style definition of the control, the control is set to transparent, so that it is not visible, but can still interact with the user. Wherein the font size is variable, because the input
font size is different from the control body text, it is necessary to set separately:
body {
font-size: var(--font-size);
}
:root {
--font-size: 16px;
}
.toggle {
position: absolute;
font-size: var(--font-size);
width: 5em;
height: 8em;
margin: 0;
filter: opacity(0);
cursor: pointer;
z-index: 2;
}
Switch setting contour:
.switch {
position: absolute;
width: 5em;
height: 8em;
border-radius: 1.2em;
background: linear-gradient(#d2d4d6, white);
}
The switch becomes shaded perspective:
.switch {
box-shadow:
inset 0 -0.2em 0.4em rgba(212, 212, 212, 0.75),
inset 0 -0.8em 0 0.1em rgba(156, 156, 156, 0.85),
0 0 0 0.1em rgba(116, 116, 116, 0.8),
0 0.6em 0.6em rgba(41, 41, 41, 0.3),
0 0 0 0.4em #d4d7d8;
}
Pseudo-element is set on
and off
the text, is now in off
state:
.toggle ~ .switch::before,
.toggle ~ .switch::after {
position: absolute;
width: 100%;
text-align: center;
font-size: 1.4em;
font-family: sans-serif;
text-transform: uppercase;
}
.toggle ~ .switch::before {
content: '|';
bottom: 1em;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8);
}
.toggle ~ .switch::after {
content: 'O';
top: 0.6em;
color: rgba(0, 0, 0, 0.45);
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
}
The input
control is set to checked
state, in order to set the on
style state:
<input type="checkbox" checked="checked" class="toggle">
Disposed in on
a switching pattern state:
.toggle:checked ~ .switch {
background: linear-gradient(#a1a2a3, #f0f0f0);
box-shadow:
inset 0 0.2em 0.4em rgba(212, 205, 199, 0.75),
inset 0 0.8em 0 0.1em rgba(255, 255, 255, 0.77),
0 0 0 0.1em rgba(116, 116, 118, 0.8),
0 -0.2em 0.2em rgba(41, 41, 41, 0.18),
0 0 0 0.4em #d4d7d8;
}
Set in a on
text style state:
.toggle:checked ~ .switch::before {
bottom: 0.3em;
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
}
.toggle:checked ~ .switch::after {
top: 1.2em;
text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
}
Next, set the lighting effects.
First set up in off
a dark state the effect of:
.toggle ~ .light {
width: 100vw;
height: 100vh;
background-color: #0a0a16;
z-index: 1;
filter: opacity(0.7);
}
And then set in on
a bright effect state:
.toggle:checked ~ .light {
filter: opacity(0);
}
We're done!