CSS2 Spotlight

Developer
Nick Mkrtchyan
Size
2,531 Kb
Views
14,168
  1. CSS2 Spotlight Previews
  2. CSS2 Spotlight HTML Codes
  3. CSS2 Spotlight CSS Codes
  4. CSS2 Spotlight JS Codes

How do I make an css2 spotlight?

What is a css2 spotlight? How do you make a css2 spotlight? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

CSS2 Spotlight Previews
IQ Test

CSS2 Spotlight - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS2 Spotlight</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div id="label"> <h1>CSS2 Spotlight</h1> <p> Turn on the <strong>light!</strong> </p> <p> Works with Webkit, Firefox, Opera &amp; Explorer </p> <br><br> See <a id="click" href="https://codepen.io/Sonick/pen/lHtDf/">&nbsp;</a><a id="show" href="#">3D Gallery</a>
</div>
<div id="xspot_t" style="height: 163px;"></div>
<div id="xspot_b" style="top: 463px;"></div>
<div id="xspot_l" style="top: 163px; width: 345px;"></div>
<div id="xspot_r" style="left: 645px; top: 163px;"></div>
<div id="xspot" style="left: 345px; top: 163px;"></div>
</body> <script src="js/index.js"></script>
</body>
</html>

CSS2 Spotlight - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
html, body { overflow: hidden; background: #323E65;
}
#label { margin-top: 6em; font-family: Georgia; color: #FFF; text-align: center;
}
h1 { font-size: 24pt; letter-spacing: 4pt;
}
p { font-size: 48pt; line-height: 48pt;
}
p + p { font-size: 18pt; color: gold;
}
strong { display: block; font-size: 100pt; line-height: 100pt;
}
a { text-decoration:none; }
a#click { color:transparent; z-index:3; position:relative; margin-right:-12em; width:12em; display:inline-block }
a#show{ color:#0099FF; z-index:0; position:relative; }
#xspot { position:absolute; width:300px; height:300px; cursor:none; background:
url(http://alteredqualia.com/visualization/img/spotlight.png); z-index:2 }
#xspot_t { position:absolute; top:0; left:0; width:100%; height:300px; background:url(http://alteredqualia.com/visualization/img/black80.png); }
#xspot_b { position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://alteredqualia.com/visualization/img/black80.png); }
#xspot_l { position:absolute; top:0; left:0; width:100%; height:300px; background:url(http://alteredqualia.com/visualization/img/black80.png); }
#xspot_r { position:absolute; top:0; left:0; width:100%; height:300px; background:url(http://alteredqualia.com/visualization/img/black80.png); }

CSS2 Spotlight - Script Codes JS Codes

var xspot = document.getElementById('xspot');
var xspot_t = document.getElementById('xspot_t');
var xspot_b = document.getElementById('xspot_b');
var xspot_l = document.getElementById('xspot_l');
var xspot_r = document.getElementById('xspot_r');
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
function clamp(x) { return x>=0 ? x : 0;
}
/* A bit of JS to respond to mouse events */
function moveSpot(e){ var gx = 0; var gy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { gx = e.pageX; gy = e.pageY; } else if (e.clientX || e.clientY) { gx = e.clientX + document.body.scrollLeft; gy = e.clientY + document.body.scrollTop; } xspot.style.left = (gx-150)+"px"; xspot.style.top = (gy-150)+"px"; xspot_t.style.height = clamp(gy-150)+"px"; xspot_b.style.top = (gy+150)+"px"; xspot_r.style.left = (gx+150)+"px"; xspot_r.style.top = (gy-150)+"px"; xspot_l.style.top = (gy-150)+"px"; xspot_l.style.width = clamp(gx-150)+"px";
}
window.onload = function() { document.onmousemove = moveSpot;
}
CSS2 Spotlight - Script Codes
CSS2 Spotlight - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4.5
Size 2,531 Kb
Views 14,168
Do you need developer help for CSS2 Spotlight?

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!

Nick Mkrtchyan (Sonick) Script Codes
Name
Preloader
Slider
Mozilla DevDerby
Canvas Background Effect 3
3D Gallery
JQuery Gallery Simple 3D Effect
CSS3 Room
Canvas Hover Effect
CSS3 Text Animation Effect
Canvas Starfield
Create amazing blog posts 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!