Some of Our Sources
- Smashing Magazine
- TutsPlus - Design
- You The Designer
- Fuel Your Creativity
- FanExtra - PSD
- Specky Boy
- CSS Tricks
- Willems Lab
- Daily Now
- TechPowerUp
Help Webnuz
Referal links:
May 4, 2021 09:22 am GMT
Original Link: https://dev.to/nikhilroy2/background-toggle-with-clip-path-only-html-css-edl
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> <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.
Original Link: https://dev.to/nikhilroy2/background-toggle-with-clip-path-only-html-css-edl
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To