Magic Due To Logic: December 2020

Friday 25 December 2020

Custom Toggle Switch using CSS

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Toggle Switch using CSS</title>
  </head>
  <body>
    <div class="box">
      <input type="checkbox" name="" id="">
      <div class="circle">

      </div>
    </div>
  </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  background: black;
}
.box{
  width: 120px;
  height: 60px;
  border: 4px solid #252525;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
input{
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance:none;
}
.circle{
  position: absolute;
  top:2px;
  left: 2px;
  width: 48%;
  height: 48px;
  background: rgb(48, 48, 48);
  border-radius: 50px;
  z-index: -1;
  transition: all .5s;
}
.circle::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  background: rgb(85, 85, 85);
  border-radius: 50px;
  transition: all 0.5s;
}
input:checked ~ .circle{
  transform: translateX(100%);
}
input:checked ~ .circle::before{
  background: #ffff00;
  box-shadow: 0 0 50px 3px #ffff00;
}

Download - Code

Tuesday 22 December 2020

Custom Cursor Using HTML CSS & JS

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Cursor</title>
  </head>
  <body>
    <div class="cursor">

    </div>
    <script type="text/javascript">
      const cursor=document.querySelector(".cursor");
      document.addEventListener("mousemove",e=>{
        cursor.setAttribute("style","top:"+e.pageY +"px;left:"+e.pageX +"px;")
      });
      document.addEventListener("click",()=>{
        cursor.classList.add("new");
        setTimeout(()=>{
          cursor.classList.remove("new");
        },500)
      })
    </script>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  height: 100vh;
  background: black;
  cursor: none;
}
.cursor{
position: absolute;
width: 10px;
height: 10px;
border: 4px solid rgba(255, 255, 255,0.623);
border-radius: 50%;
}
.cursor::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.301);
  border-radius: 50%;
  animation: animl 0.5s linear infinite;
}
@keyframes animl {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(3);
  }
}
.new{
  animation: anim 0.5s forwards;
  border: 4px solid rgba(255, 0, 0, 0.692);
}
@keyframes anim {
  0%,100%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
}

Download - Code

Saturday 12 December 2020

Button With Hover Effect

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Button With Hover Effect</title>
  </head>
  <body>
    <div class="main">
      <button class="btn">CLICK ME</button>
    </div>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}
.btn{
  width: 200px;
  height: 60px;
  font-size: 1.0rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
  color: white;
  z-index: 0;
  border: 1px solid #892cdc;
  background: black;
  overflow: hidden;
}
.btn:hover::before{
  top: 0px;
  border-radius: 0;
}
.btn::before{
  content: '';
  position: absolute;
  top: 60px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #892cdc;
  border-radius: 50% 50% 0% 0;
  z-index: -1;
  transition: all 0.5s;
}

Download - Code

Sunday 6 December 2020

Rain Animation with Lighting Effect

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Rain Animation with Lighting Effect</title>
  </head>
  <body>
    <div class="rain">
      
    </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.rain{
  height: 100vh;
  background: url(rain.png);
  animation: rain .5s linear infinite;
}
.rain::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: lighting .3s linear infinite;
  opacity: 0;
}
@keyframes rain {
  0%{
    background-position: 0% 0%;
  }
  100%{
    background-position: 20% 100%;
  }
}
@keyframes lighting {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 0;
  }
  11%{
    opacity: 1;
  }
  14%{
    opacity: 0;
  }
  20%{
    opacity: 0;
  }
  21%{
    opacity: 1;
  }
  24%{
    opacity: 0;
  }
  104%{
    opacity: 0;
  }
}

Download - Code

Download - Full Code

Magic Due To Logic

Pages

Friday 25 December 2020

Custom Toggle Switch using CSS

Custom Toggle Switch using CSS

index.html

style.css

Tuesday 22 December 2020

Custom Cursor Using HTML CSS & JS

Custom Cursor Using HTML CSS & JS

index.html

style.css

Saturday 12 December 2020

Button With Hover Effect

Button With Hover Effect

index.html

style.css

Sunday 6 December 2020

Rain Animation with Lighting Effect

Rain Animation with Lighting Effect

index.html

style.css

Donate