BOX SHADOW MADNESS!
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! - 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);
}
Developer | Jeff Daze |
Username | jeffdaze |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,888 Kb |
Views | 6,072 |
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!
Name | Size |
Quick torus demo three.js | 1,894 Kb |
Angular Drag Example | 2,497 Kb |
Simple handlebars demo | 1,940 Kb |
Circular Drag and Drop | 2,451 Kb |
A Pen by Jeff Daze | 2,191 Kb |
Simulation of famous C64 code... | 1,788 Kb |
A test card for a Munchkin-like game | 2,044 Kb |
Corner Triangle | 1,490 Kb |
Speed Reading | 6,553 Kb |
Attempt to implement diamond square algorithm | 2,110 Kb |
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!
Name | Username | Size |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Boxes | H3l1um | 2,563 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
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. Hide Your IP Now!