Pretty Colors

In this example below you will see how to do a Pretty Colors with some HTML / CSS and Javascript

Playing around with colorful glow effects using box-shadow. Click a luminaire to toggle it on or off.

Thumbnail
This awesome code was written by lonekorean, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lonekorean ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pretty Colors</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      *, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: radial-gradient(#222, #000);
  background-attachment: fixed;
}

body {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 455px);
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
}

.luminaire {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 50px;
  border-radius: 50%;
  background-color: #000;
  box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #0ff;
  transition: box-shadow 4s ease-out;
  animation: spin 16s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.luminaire:hover {
  cursor: pointer;
}

.luminaire::before, .luminaire::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #ff0;
  opacity: 0;
  transition: opacity 8s, transform 8s;
}

.on {
  background-color: #fff;
  box-shadow: 0 0 80px 40px #fff, 0 0 200px 100px #f0f;
}

.on::before {
  transform: translateX(-100px);
  opacity: 1;
}

.on::after {
  transform: translateX(100px);
  opacity: 1;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class='luminaire'></div>
<div class='luminaire'></div>
<div class='luminaire'></div>
<div class='luminaire'></div>
<div class='luminaire'></div>
<div class='luminaire'></div>
<div class='luminaire'></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/lonekorean/pretty-colors-qHvdA */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: radial-gradient(#222, #000);
  background-attachment: fixed;
}

body {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 455px);
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
}

.luminaire {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 50px;
  border-radius: 50%;
  background-color: #000;
  box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #0ff;
  transition: box-shadow 4s ease-out;
  animation: spin 16s linear infinite;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.luminaire:hover {
  cursor: pointer;
}

.luminaire::before, .luminaire::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 40px 20px #fff, 0 0 100px 50px #ff0;
  opacity: 0;
  transition: opacity 8s, transform 8s;
}

.on {
  background-color: #fff;
  box-shadow: 0 0 80px 40px #fff, 0 0 200px 100px #f0f;
}

.on::before {
  transform: translateX(-100px);
  opacity: 1;
}

.on::after {
  transform: translateX(100px);
  opacity: 1;
}


/*Downloaded from https://www.codeseek.co/lonekorean/pretty-colors-qHvdA */
/*
  The color effects and animation are done via CSS. This bit of JavaScript just lets you toggle the luminaires and turns a few on to start.
*/

$(function() {
  $('.luminaire:nth-child(2n)').addClass('on');
  $('.luminaire').on('click', function() {
    $(this).toggleClass('on');
  });
});

Comments