Making a "3D Dimmer Light to Dark"

*MADE BY DEVANSH MISHRA*
<!DOCtype html>

<html>
<style>
   :root {
    --light-mode: inset 0px -4px 6px 0px #8b96a9, inset 0px 4px 4px 1px #f3f3f5, inset 0px 4px 6px 0px #b9bcc7, inset 0px -4px 0px 1px #b2becb, 0px 5px 8px 1px #7f899c, 0px -15px 15px 9px #e5eaef, 0px 0px 2px 3px #181818, 0px 7px 25px 5px #8893a6, 0px 15px 15px 0px #bec2c7, 0px 55px 55px 5px #cad1db;
    --dark-mode: inset 0px -4px 6px 0px #191b28, inset 0px 4px 4px 1px #738196, inset 0px 4px 6px 0px #455265, inset 0px -4px 0px 1px #191b28, 0px 5px 8px 1px #000000, 0px 0px 6px 3px #181b21, 0px 0px 2px 3px #181818, 0px 7px 25px 5px #191b28, 0px -15px 25px 0px #73869f, 0px 55px 55px 5px #191e2a;
    --knob-inner-light: inset 16px 5px 10px 0px #d6dce3, inset -20px 5px 10px 0 #a3aebf;
    --knob-inner-dark: inset -16px 5px 10px 0px #191e2a, inset 20px 5px 10px 0 #2e374b;
    --light-mode-background: linear-gradient(180deg, #f3f4f6, #aeb9c6);
    --dark-mode-background: linear-gradient(180deg, #384257, #171c26);
    --dark-mode-glare-color: #6d7c96;
    --text-color: #8391a7;
    --animation-duration: 5s;
  }
  
  * {
    margin: 0;
    padding: 0;
  }
  
  .dimmer-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .dimmer-container .dimmer {
    height: 280px;
    width: 280px;
    border-radius: 100%;
    position: relative;
    z-index: 2;
    animation: change-mood var(--animation-duration) infinite;
    transition: box-shadow var(--animation-duration) ease-in;
    box-shadow: var(--light-mode);
  }
  
  .dimmer-container .dimmer .dimmer-inner,
  .dimmer-container .dimmer .dimmer-lines {
    height: 280px;
    width: 280px;
    border-radius: 100%;
    animation-name: knob-outer;
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  
  .dimmer-container .dimmer .dimmer-inner-knob {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    position: absolute;
    bottom: 60px;
    left: 50px;
    animation-name: knob-inner;
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    box-shadow: var(--knob-inner-light);
    transition: box-shadow var(--animation-duration);
  }
  
  .dimmer-container .dimmer canvas#dimmer-lines {
    position: absolute;
    transform: translate(-90px, -90px);
  }
  
  .dimmer-container .background {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  .dimmer-container .background.light {
    background: var(--light-mode-background);
  }
  
  .dimmer-container .background.dark {
    background: var(--dark-mode-background);
    opacity: 0;
    z-index: 1;
    animation: fade-background var(--animation-duration) infinite;
  }
  
  .dimmer-container .background.dark:after,
  .dimmer-container .background.dark:before {
    content: "";
    position: absolute;
    height: 40%;
    width: 50%;
    top: 0;
    filter: blur(80px);
    animation: rotateblur var(--animation-duration) infinite;
    transition: transform var(--animation-duration);
  }
  
  .dimmer-container .background.dark:after {
    background: linear-gradient( to left, var(--dark-mode-glare-color), transparent);
    left: 0;
    animation: rotateleft var(--animation-duration) infinite;
  }
  
  .dimmer-container .background.dark:before {
    background: linear-gradient( to right, var(--dark-mode-glare-color), transparent);
    right: 0;
    animation: rotateright var(--animation-duration) infinite;
  }
  
  .dimmer-container .dimmer .text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: Helvetica, helvetica, sans-serif;
    letter-spacing: 1px;
    color: var(--text-color);
    position: relative;
    font-weight: 500;
  }
  
  .dimmer-container .dimmer .text span:first-child {
    margin-left: -45px;
    margin-top: -25px;
  }
  
  .dimmer-container .dimmer .text span:nth-child(2) {
    margin-right: -45px;
    margin-top: -25px;
  }
  
  @keyframes change-mood {
    0%,
    100% {
      box-shadow: var(--light-mode);
    }
    50% {
      box-shadow: var(--dark-mode);
    }
  }
  
  @-webkit-keyframes change-mood {
    0%,
    100% {
      -webkit-box-shadow: var(--light-mode);
      box-shadow: var(--light-mode);
    }
    50% {
      -webkit-box-shadow: var(--dark-mode);
      box-shadow: var(--dark-mode);
    }
  }
  
  @-webkit-keyframes rotateleft {
    0%,
    100% {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    50% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
  
  @keyframes rotateleft {
    0%,
    100% {
      transform: rotate(45deg);
    }
    50% {
      transform: rotate(-45deg);
    }
  }
  
  @-webkit-keyframes rotateright {
    0%,
    100% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    50% {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
  
  @keyframes rotateright {
    0%,
    100% {
      transform: rotate(-45deg);
    }
    50% {
      transform: rotate(45deg);
    }
  }
  
  @keyframes fade-background {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes fade-background {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  
  @keyframes knob-outer {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(270deg);
    }
  }
  
  @-webkit-keyframes knob-outer {
    0%,
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  
  @keyframes knob-inner {
    0%,
    100% {
      transform: rotate(270deg);
      box-shadow: var(--knob-inner-light);
    }
    50% {
      transform: rotate(0deg);
      box-shadow: var(--knob-inner-dark);
    }
  }
  
  @-webkit-keyframes knob-inner {
    0%,
    100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-box-shadow: var(--knob-inner-light);
      box-shadow: var(--knob-inner-light);
    }
    50% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-box-shadow: var(--knob-inner-dark);
      box-shadow: var(--knob-inner-dark);
    }
  }
</style>

<body>
  <!--
Inspiration: 
3D Dimmer by Voicu Apostol
https://dribbble.com/shots/16224255-3D-Dimmer
-->

  <div class="dimmer-container">
    <div class="background light"></div>
    <div class="background dark"></div>
    <div class="dimmer">
      <canvas id="dimmer-lines" height="325" width="470"></canvas>
      <div class="dimmer-inner">
        <div class="dimmer-inner-knob">
        </div>
      </div>
      <div class="text">
        <span>LIGHT</span>
        <span>DARK</span>
      </div>
    </div>
  </div>
  <script>
    let strokeColor = "#8391A7";
    var dimmerLines = document.getElementById("dimmer-lines");
    var cxt = dimmerLines.getContext("2d");
    for (var i = 0; i < 60; i++)
    {
      cxt.save();
      cxt.translate(230, 230);
      cxt.rotate((i * 6 * Math.PI) / 180);
      cxt.beginPath();
      cxt.moveTo(0, -176);
      cxt.lineTo(0, -188);
      cxt.closePath();
      cxt.lineWidth = 2;
      cxt.strokeStyle = strokeColor;
      cxt.shadowBlur = 0;
      cxt.shadowOffsetX = 0;
      cxt.shadowOffsetY = 0;
      cxt.stroke();
      cxt.restore();
    }
  </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more