Cursor-Based Box-Shadow with EQCSS

Developer
Tommy Hodgins
Size
1,925 Kb
Views
44,528
  1. Cursor-Based Box-Shadow with EQCSS Previews
  2. Cursor-Based Box-Shadow with EQCSS HTML Codes
  3. Cursor-Based Box-Shadow with EQCSS CSS Codes
  4. Cursor-Based Box-Shadow with EQCSS JS Codes

How do I make an cursor-based box-shadow with eqcss?

What is a cursor-based box-shadow with eqcss? How do you make a cursor-based box-shadow with eqcss? This script and codes were developed by Tommy Hodgins on 12 July 2022, Tuesday.

Cursor-Based Box-Shadow with EQCSS Previews
IQ Test

Cursor-Based Box-Shadow with EQCSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cursor-Based Box-Shadow with EQCSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/eqcss/1.5.1/EQCSS.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cursor-Based Box-Shadow with EQCSS - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { margin: 0;
}
div { float: left; width: calc(100vw / 11); height: calc(100vh / 11); margin: calc(100vh / 11) 0 0 calc(100vw / 11);
}
@element div { $this { box-shadow: rgba(0,0,0,.3) eval('(offsetLeft + offsetWidth/2 - cursorX) / 50')px eval('(offsetTop + offsetHeight/2 - cursorY) / 50')px 1vh ; }
}

Cursor-Based Box-Shadow with EQCSS - Script Codes JS Codes

var cursorX = 0
var cursorY = 0
function update(e){ cursorX = e.clientX || e.touches[0].clientX cursorY = e.clientY || e.touches[0].clientY EQCSS.apply()
}
// Update cursor position every mouse/touch move
document.addEventListener('mousemove',update)
document.addEventListener('touchmove',update)
Cursor-Based Box-Shadow with EQCSS - Script Codes
Cursor-Based Box-Shadow with EQCSS - Script Codes
Home Page Home
Developer Tommy Hodgins
Username tomhodgins
Uploaded July 12, 2022
Rating 4.5
Size 1,925 Kb
Views 44,528
Do you need developer help for Cursor-Based Box-Shadow with EQCSS?

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!

Tommy Hodgins (tomhodgins) Script Codes
Name
Matching height via EH units
Responsive Pagination
Highlighted Search Term
Using JavaScript variables in CSS
Self-Responsive Social Buttons
Responsive Scrolling Sticky Header
Basic HTML Slideshow
Alternating Blockquotes
A Parent Selector for CSS
Element Query Demo with EQCSS
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!