BOX SHADOW MADNESS!

Test of box shadow properties, and viability as a spriting engine... What is a box shadow madness! How do you make a box shadow madness!? This script and codes were developed by Jeff Daze on 24 March 2022, Thursday.

How do I make an box shadow madness!?
  1. BOX SHADOW MADNESS! Previews
  2. BOX SHADOW MADNESS! HTML Codes
  3. BOX SHADOW MADNESS! CSS Codes
  4. BOX SHADOW MADNESS! JS Codes
BOX SHADOW MADNESS! Previews

BOX SHADOW MADNESS! HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>BOX SHADOW MADNESS!</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <button id="runner">Run it!</button><button id="stopper">Stop it!</button>
<div class="box subflare"></div>
  
    <script  src="js/index.js"></script>

</body>
</html>

BOX SHADOW MADNESS! CSS Codes

/* how many outlines can we get?

  can use:
    border,
    bg with padding,
    outline,
    and the infinite monster of box-shadow!


  box-shadow: [horizontal offset] [vertical offset] [blur] [spread];

  another test! will a second class allow us to add another 
  pseudo element?

  let's see!

  pseudo element inserts for most browsers:

  document.styleSheets[0].insertRule('a:hover { color: green; }', 0);

  IE just has to be different!

  document.styleSheets[0].addRule('a:hover', 'color: green', 0);

*/
body{
  background:#000;
}

.box{
  width:10px;
  height:10px;
  margin:150px;
  
  border-radius:50%;
  
  /*
  box-shadow:
    1px 1px 0 0 rgba(255,0,0,1),
    2px 2px 0 0 rgba(255,0,0,1),
    3px 3px 0 0 rgba(255,0,0,1),
    4px 4px 0 0 rgba(255,0,0,1),
    5px 5px 0 0 rgba(255,0,0,1);
  */
}

.box:before{
  content: "";
  position:relative;
  display:block;
  background:rgba(255,255,255,0.9);
  
  top:5px;
  left:4px;
  width:1px;
  height:5px;
  border-radius:50%;
  box-shadow: 0px 0px 16px 7px rgba(255,255,255,0.9);
  
}

.box:after{
  content:"";
  position:relative;
  display:block;
  top:2px;
  left:-200px;
  width:500px;
  height:2px;
  
  border-radius:50%;
  
  border-top:1px solid rgba(255,255,255,0.1);
  
  background:rgba(255,255,255,0.3); 
  
  box-shadow: 0px 0px 10px 3px rgba(255,255,255,0.4);
 
}

BOX SHADOW MADNESS! JS Codes

//vars...
//timer control...
var running;



//bind clicks to buttons...
$("#runner").addEventListener('click', function() {
    strt();
}, false);

$("#stopper").addEventListener('click', function() {
    stp();
}, false);

var render = function(){
  
  var el = $(".box");
  
  
  //lets test pseudoselector...
  //$(".box::after").style.background = "#eaeaea";
  
  //generate the line...
  //use this to trim the comma off the last entry:
  //
  //  var trimmed = string.substr(0, string.length-1);
  //
  
  //make a line some number of pixels long...
  var lineLength = randRange(10, 500);
  
  //buffer for the box shadow css...
  var cssString="";
  
  //build our string!
  for(var i=0;i<=lineLength;i++){
    cssString += shadowLine(i, i, randRange(1, 5), (i+1) / randRange(1, 200), randRange(0, 255), randRange(0, 255), randRange(0, 255), Math.random()-0.825);
    //cssString += shadowLine(i, i, 0, 0, 10, 0, 255, 1);
    //if it's the last one, chop off the comma char...
    if(i==lineLength){
       cssString = cssString.substr(0, cssString.length-1);
    }
  }
  
  
  var shadow = "1px 1px 0 0 rgba(0,0,255,1),\
    2px 2px 0 0 rgba(0,0,255,1),\
    3px 3px 0 0 rgba(0,0,255,1),\
    4px 4px 0 0 rgba(0,0,255,1),\
    5px 5px 0 0 rgba(0,0,255,1)";
  
  el.style.boxShadow = cssString;
};

var shadowLine = function(x, y, blur, spread, r, g, b, a){
   return x+"px "+y+"px "+blur+"px "+spread+"px rgba("+r+","+g+","+b+","+a+"),"; 
};

//utility functions...

function strt(){
	running = setInterval("render()", 100);
}

function stp(){
	clearInterval(running);
}

//random number...
function randRange(min, max){
   return Math.floor(Math.random() * (max - min + 1)) + min; 
}

//TAKE THAT jQuery!!
function $(selector){
	return document.querySelector(selector);
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.