Created
February 28, 2023 15:52
-
-
Save AakashRao-dev/b6440104353aa4fcef28aa580e897093 to your computer and use it in GitHub Desktop.
Redundant CSS Code Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Redundant CSS Example</title> | |
| <link rel="stylesheet" href="./styles.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="toggle-1"> | |
| <div class="indicator-1"></div> | |
| </div> | |
| <div class="toggle-2"> | |
| <div class="indicator-2"></div> | |
| </div> | |
| <div class="toggle-3"> | |
| <div class="indicator-3"></div> | |
| </div> | |
| <div class="toggle-4"> | |
| <div class="indicator-4"></div> | |
| </div> | |
| <div class="toggle-5"> | |
| <div class="indicator-5"></div> | |
| </div> | |
| <div class="toggle-6"> | |
| <div class="indicator-6"></div> | |
| </div> | |
| <div class="toggle-7"> | |
| <div class="indicator-7"></div> | |
| </div> | |
| <div class="toggle-8"> | |
| <div class="indicator-8"></div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| const toggles = document.querySelectorAll('[class^="toggle"]'); | |
| const body = document.querySelector('body'); | |
| toggles.forEach(function (toggle) { | |
| toggle.addEventListener('click', function (e) { | |
| console.log(e.target.className); | |
| toggle.classList.toggle('active'); | |
| body.classList.toggle('active'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #fff; | |
| min-height: 100vh; | |
| transition: all 0.5s; | |
| display: grid; | |
| place-content: center; | |
| } | |
| .container { | |
| max-width: 800px; | |
| height: 80vh; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| justify-items: center; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| [class^='indicator'] { | |
| position: absolute; | |
| left: 80px; | |
| width: 80px; | |
| height: 80px; | |
| background: linear-gradient(to bottom, #eaeaea, #f9f9f9); | |
| border-radius: 50%; | |
| transform: scale(0.9); | |
| box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), | |
| inset 0 4px 4px rgba(255, 255, 255, 0.2), | |
| inset 0 -4px 4px rgba(255, 255, 255, 0.2); | |
| transition: all 0.5s; | |
| } | |
| .toggle-1 { | |
| background: #04d99d; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-2 { | |
| background: #f27b13; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-3 { | |
| background: #04b2d9; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-4 { | |
| background: #ae4ad9; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-5 { | |
| background: #bc4393; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-6 { | |
| background: #04d99d; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-7 { | |
| background: #f21905; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-8 { | |
| background: #555555; | |
| position: relative; | |
| display: block; | |
| width: 160px; | |
| height: 80px; | |
| border-radius: 160px; | |
| margin-top: 1rem; | |
| cursor: pointer; | |
| transition: all 0.8s; | |
| box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), | |
| inset 0 8px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| [class^='toggle'].active { | |
| box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1), | |
| inset 0 4px 4px rgba(255, 255, 255, 0.1), | |
| inset 0 -4px 4px rgba(255, 255, 255, 0.1); | |
| background: linear-gradient(to bottom, #eaeaea, #f9f9f9); | |
| transition: all 0.2s; | |
| } | |
| [class^='toggle'].active [class^='indicator'] { | |
| left: 0; | |
| transition: all 0.5s; | |
| } | |
| body.active { | |
| background: #2b2b2b; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment