Background Toggle with clip path only HTML and CSS

Background Toggle with clip path only html css

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used clip-path generator

HTML

<!DOCTYPE html>
<html lang=”en”>

<head>
&l…



Background Toggle with clip path only html css

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used clip-path generator

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">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="check">
    <label for="check">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </label>
    <main></main>
</body>

</html>

for icon I have used font-awesome icons.
when toggling it will show sun and moon with black background.
CSS

*{
    box-sizing: border-box;
    margin: 0;
}
label{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 35px;
    background: #7d68ee;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    cursor: pointer;
}
label .fas{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    transition: .5s;
    color: white;
}
label .fa-moon{
    opacity: 0;
}
input:checked ~ label .fas{
    left: 70%;
}
input:checked ~ label .fa-sun{
    opacity: 0;
}
input:checked ~ label .fa-moon{
    opacity: 1;
}
input{
    display: none;
}
main{
    background: #000;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transition: 1s;
    clip-path: polygon(80% 0, 100% 0, 100% 12%, 100% 20%, 98% 3%, 82% 0, 65% 0);

}
input:checked ~ main{
    clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 100%, 0 100%, 0 89%, 0 38%);
}

If you like my tutorial, don’t forget to share your thought.
Thanks.


Print Share Comment Cite Upload Translate
APA
Nikhil Chandra Roy | Sciencx (2024-03-28T16:37:02+00:00) » Background Toggle with clip path only HTML and CSS. Retrieved from https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/.
MLA
" » Background Toggle with clip path only HTML and CSS." Nikhil Chandra Roy | Sciencx - Tuesday May 4, 2021, https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/
HARVARD
Nikhil Chandra Roy | Sciencx Tuesday May 4, 2021 » Background Toggle with clip path only HTML and CSS., viewed 2024-03-28T16:37:02+00:00,<https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/>
VANCOUVER
Nikhil Chandra Roy | Sciencx - » Background Toggle with clip path only HTML and CSS. [Internet]. [Accessed 2024-03-28T16:37:02+00:00]. Available from: https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/
CHICAGO
" » Background Toggle with clip path only HTML and CSS." Nikhil Chandra Roy | Sciencx - Accessed 2024-03-28T16:37:02+00:00. https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/
IEEE
" » Background Toggle with clip path only HTML and CSS." Nikhil Chandra Roy | Sciencx [Online]. Available: https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/. [Accessed: 2024-03-28T16:37:02+00:00]
rf:citation
» Background Toggle with clip path only HTML and CSS | Nikhil Chandra Roy | Sciencx | https://www.scien.cx/2021/05/04/background-toggle-with-clip-path-only-html-and-css/ | 2024-03-28T16:37:02+00:00
https://github.com/addpipe/simple-recorderjs-demo