macos-cursors
Version:
MacOS cursor pack for web pages
97 lines (80 loc) • 1.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MacOS Cursors</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="grid">
<div class="cursor-ns-resize">
.cursor-ns-resize
</div>
<div class="cursor-ew-resize">
.cursor-ew-resize
</div>
<div class="cursor-nw-resize">
.cursor-nw-resize
</div>
<div class="cursor-ne-resize">
.cursor-ne-resize
</div>
<div class="cursor-pointer">
.cursor-pointer
</div>
<div class="cursor-move">
.cursor-move
</div>
<div class="cursor-grab">
.cursor-grab
</div>
<div class="cursor-grabbing">
.cursor-grabbing
</div>
<div class="cursor-text">
.cursor-text
</div>
<div class="cursor-crosshair">
.cursor-crosshair
</div>
<div class="cursor-not-allowed">
.cursor-not-allowed
</div>
<div class="cursor-zoom-in">
.cursor-zoom-in
</div>
<div class="cursor-zoom-out">
.cursor-zoom-out
</div>
<div class="cursor-help">
.cursor-help
</div>
<div class="cursor-writing">
.cursor-writing
</div>
<div class="cursor-alter">
.cursor-alter
</div>
</div>
</body>
<style>
* {
box-sizing: border-box;
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
width: 100vw;
height: 100vh;
}
.grid > div {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
font: 14px/1 sans-serif;
}
</style>
</html>