Skip to content

Instantly share code, notes, and snippets.

@AakashRao-dev

AakashRao-dev/index.html

Created February 28, 2023 15:56
Show Gist options
  • Save AakashRao-dev/bffd18e4978d200e68b37f0850b140d3 to your computer and use it in GitHub Desktop.
Save AakashRao-dev/bffd18e4978d200e68b37f0850b140d3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. AakashRao-dev created this gist Feb 28, 2023.
    56 changes: 56 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <!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>
    100 changes: 100 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    * {
    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^='toggle'] {
    position: relative;
    display: block;
    width: 160px;
    height: 80px;
    background: #f9f9f9;
    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^='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;
    }

    .toggle-2 {
    background: #f27b13;
    }

    .toggle-3 {
    background: #04b2d9;
    }

    .toggle-4 {
    background: #ae4ad9;
    }

    .toggle-5 {
    background: #bc4393;
    }

    .toggle-6 {
    background: #04d99d;
    }

    .toggle-7 {
    background: #f21905;
    }

    .toggle-8 {
    background: #555555;
    }

    [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;
    }