Background Toggle with clip path only HTML and CSS

This content originally appeared on DEV Community and was authored by Nikhil Chandra Roy

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.

This content originally appeared on DEV Community and was authored by Nikhil Chandra Roy

Print Share Comment Cite Upload Translate Updates

APA

Nikhil Chandra Roy | Sciencx (2021-05-04T09:22:56+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 ,<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 ]. 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 . 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: ]

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/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Background Toggle with clip path only html css

Related Posts