BOX SHADOW MADNESS!

Developer
Jeff Daze
Size
2,888 Kb
Views
6,069

How do I make an 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 18 January 2023, Wednesday.

BOX SHADOW MADNESS! Previews
IQ Test

BOX SHADOW MADNESS! - Script Codes 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! - Script Codes 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! - Script Codes 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);
}
BOX SHADOW MADNESS! - Script Codes
BOX SHADOW MADNESS! - Script Codes
Home Page Home
Developer Jeff Daze
Username jeffdaze
Uploaded January 18, 2023
Rating 3
Size 2,888 Kb
Views 6,069
Do you need developer help for BOX SHADOW MADNESS!?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Daze (jeffdaze) Script Codes
Name
Tilemap Edge CSS
Code snippets for a Puyo clone
A Pen by Jeff Daze
Finite Scroll Example
Desktop Notifications
Angular Drag Example
Speed Reading
Winter Scene
Quick torus demo three.js
Attempt to implement diamond square algorithm
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!