HTML-CSS-JavaScript Snippets

Cool Glowing Frame Effect

Description: Cool glowing animated frame, can be used to indicate activation or as click ripple effect

Dependencies: None

Mobile support: Yes

Image source: toyota.com

Inspiration: KIA Bongo start-up dash animation

Live(Click on the image):

style.css
.container {
  position: relative;
  background-color: rgb(61, 61, 61);
  width: min-content;
  padding: 50px;
}
#image {
  transform: scaleX(1);
  width: 200px;
}

.frame {
  top: 40px;
  left: 45px;
  height: 90px;
  width: 120px;
  position: absolute;
  transform: perspective(900px) rotateY(-35deg);
  opacity: 0;
  border-radius: 3px;
  pointer-events: none;
}
.above {
  border-right: 3px #fff solid;
  border-top: 3px #fff solid;
  border-bottom: 3px #fff solid;
  box-shadow: 0px 0px 0 #fff, 6px 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.below {
  border-left: 3px #fff solid;
  box-shadow: 0 0 10px #9ecaed;
  padding-bottom: 5px;
}
@keyframes move-frame {
  5% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    left: 120px;
    top: 40px;
    height: 90px;
    width: 120px;
  }
  100% {
    left: 230px;
    top: 85px;
    z-index: 0;
    width: 0;
    height: 0;
    opacity: 0;
  }
}
index.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" />
    <link rel="stylesheet" href="style.css">
    <title>Glowing Frame Effect</title>

  </head>
  <body>
    <div class="container">
      <div class="frame above"></div>
      <div class="frame below"></div>
      <img id="image" src="car.png" alt="" />
    </div>
  </body>

  <script>
    var img = document.getElementById("image");
    img.addEventListener("click", () => {
      var frames = document.getElementsByClassName("frame");
      for (var i = 0; i < frames.length; i++) {
        frames.item(i).style.animation="move-frame 2s ease-in-out 1";
      }
      setTimeout(() => {
        for (var i = 0; i < frames.length; i++) {
        frames.item(i).style.animation="";
      }
      }, 2000);
    });
  </script>
</html>

Spinner Around A Word

Description: Animated dot spinning around a word that can be used as animated logo or as a loader.

Dependencies: None

Mobile support: Yes

Live:

Spin ner

Code:

style.css
.container {
  width: min-content;
  height: 80px;
  font-size: 60px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgb(18, 92, 28);
  margin: 20px;
  padding: 30px;
  background-color: rgb(197, 197, 197);
}
.word {
  display: flex;
}
.above {
  z-index: 2;
}
.below {
  z-index: 0;
}
.ring {
  display: block;
  width: 100px;
  height: 45px;
  border-radius: 50%;
  border: 2px rgb(255, 255, 255) solid;
  transform: rotate(-45deg);
  position: relative;
  top: -55px;
  left: 70px;
}
.dot {
  animation: yloop 1s infinite ease-in;
}
.dot::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  position: relative;
  top: -46px;
  left: 80px;
  border-radius: 20px;
  background-color: #fff;
  animation: xloop 1s infinite ease-out;
}
@keyframes xloop {
  40% {
    width: 20px;
    height: 20px;
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateX(72px);
  }
}
@keyframes yloop {
  50% {
    animation-timing-function: ease-in;
    transform: translateY(-80px);
  }
}
index.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" />
  <link rel="stylesheet" href="style.css">
  <title>Spinner</title>
</head>

<body>
  <div class="container">
    <div class="word">
      <span class="above"> Spin </span>
      <span class="below"> ner </span>
    </div>
    <div class="ring"></div>
    <div class="dot"></div>
  </div>
</body>

</html>

Windows 10 Inspired CSS Calendar

Description: Calendar month view that just resembles Window 10’s calendar appearance and animations.

Dependencies: JQuery

Mobile support: No

License: MIT License

Live:

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Code:

HTML-CSS-JS
<!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>Windows 10 Inspired Calender</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <style>
    body {
      background-color: rgb(39, 39, 39);
    }

    .calender-container {
      display: block;
      background-color: rgb(39, 39, 39);
      clip-path: polygon(294px 0, 294px 240px, 0 240px, 0 0);
    }

    .circle {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 255, 255, 1) 9%, rgba(39, 39, 39, 1) 63%, rgba(39, 39, 39, 1) 100%);
      width: 110px;
      height: 110px;
      border-radius: 50%;
      z-index: -1;
    }

    .calender {
      display: grid;
      grid-template-columns: repeat(7, 42px);
      grid-template-rows: repeat(6, 40px);
      cursor: default;
      width: 294px;
    }

    .day {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .number {
      background-color: rgb(39, 39, 39);
      border: 3px solid rgba(39, 39, 39, 0.5);
      background-clip: padding-box;
      padding: 2px;
      color: rgb(230, 230, 230);
      width: 80%;
      height: 80%;
    }

    .border {
      border: 0.5px solid rgba(39, 39, 39, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .name {
      background-color: rgb(39, 39, 39);
      color: rgb(230, 230, 230);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }

    .other_month {
      color: #7c7c74;
    }

    .number:hover {
      border: 3px solid rgba(255, 255, 255, 1);
    }

    .active {
      color: rgb(230, 230, 230);
      border: 3px solid #4aa4f8;
      background-color: rgb(39, 39, 39);
      background-clip: padding-box;
      padding: 2px;
      color: rgb(230, 230, 230);
      width: 80%;
      height: 80%;
    }
  </style>
</head>

<body>
  <div class="calender-container">
    <div id="calender" class="calender">
      <span id="circle" class="circle"></span>
      <div class="day name">Su</div>
      <div class="day name">Mo</div>
      <div class="day name">Tu</div>
      <div class="day name">We</div>
      <div class="day name">Th</div>
      <div class="day name">Fr</div>
      <div class="day name">Sa</div>
      <div class="border">
        <div class="day number other_month">28</div>
      </div>
      <div class="border">
        <div class="day number other_month">29</div>
      </div>
      <div class="border">
        <div class="day number other_month">30</div>
      </div>
      <div class="border">
        <div class="day number">1</div>
      </div>
      <div class="border">
        <div class="day number">2</div>
      </div>
      <div class="border">
        <div class="day number">3</div>
      </div>
      <div class="border">
        <div class="day number">4</div>
      </div>
      <div class="border">
        <div class="day number">5</div>
      </div>
      <div class="border">
        <div class="day number">6</div>
      </div>
      <div class="border">
        <div class="day number">7</div>
      </div>
      <div class="border">
        <div class="day number">8</div>
      </div>
      <div class="border">
        <div class="day number">9</div>
      </div>
      <div class="border">
        <div class="day number">10</div>
      </div>
      <div class="border">
        <div class="day number">11</div>
      </div>
      <div class="border">
        <div class="day number">12</div>
      </div>
      <div class="border">
        <div class="day number">13</div>
      </div>
      <div class="border">
        <div class="day number">14</div>
      </div>
      <div class="border">
        <div class="day number">15</div>
      </div>
      <div class="border">
        <div class="day number">16</div>
      </div>
      <div class="border">
        <div class="day number">17</div>
      </div>
      <div class="border">
        <div class="day number">18</div>
      </div>
      <div class="border">
        <div class="day number">19</div>
      </div>
      <div class="border">
        <div class="day number">20</div>
      </div>
      <div class="border">
        <div class="day number">21</div>
      </div>
      <div class="border">
        <div class="day number">22</div>
      </div>
      <div class="border">
        <div class="day number">23</div>
      </div>
      <div class="border">
        <div class="day number">24</div>
      </div>
      <div class="border">
        <div class="day number">25</div>
      </div>
      <div class="border">
        <div class="day number">26</div>
      </div>
      <div class="border">
        <div class="day number">27</div>
      </div>
      <div class="border">
        <div class="day number">28</div>
      </div>
      <div class="border">
        <div class="day number">29</div>
      </div>
      <div class="border">
        <div class="day number">30</div>
      </div>
      <div class="border">
        <div class="day number">31</div>
      </div>
      <div class="border">
        <div class="day number other_month">1</div>
      </div>
    </div>
  </div>
  <script>
    var previousElement = 0;
    var previousClasses = "";
    jQuery(document).ready(function () {
      var mouseX = 0,
        mouseY = 0;
      var xp = 0,
        yp = 0;

      $(document).mousemove(function (e) {
        mouseX = e.pageX - 55;
        mouseY = e.pageY - 55;
      });

      setInterval(function () {
        xp += (mouseX - xp) / 3;
        yp += (mouseY - yp) / 3;
        $("#circle").css({ left: xp + "px", top: yp + "px" });
      }, 25);
    });

    $('.number').click(function (e) {
      if (previousElement !== 0){
        previousElement.className = previousClasses;
      }
      previousElement = e.target;
      previousClasses = e.target.className;
      e.target.className = "day active"
    });

  </script>
</body>

</html>