<div id="root"></div>
#root {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
}
.card {
display: flex;
justify-content: center;
color: rgba(0,0,0,0.5);
height: 200px;
font-size: 1.2em;
font-weight: 900;
font-family: sans;
align-items: center;
border-radius: 4px;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.03);
background-color: rgba(10,10,10,0.9);
color: white;
box-shadow: 0 0 8px 1px rgba(10,10,10,0.6);
}
const cursors = [
'auto',
'default',
'none',
'context-menu',
'help',
'pointer',
'progress',
'wait',
'cell',
'crosshair',
'text',
'vertical-text',
'alias',
'copy',
'move',
'no-drop',
'not-allowed',
'grab',
'grabbing',
'all-scroll',
'col-resize',
'row-resize',
'n-resize',
'e-resize',
's-resize',
'w-resize',
'ne-resize',
'nw-resize',
'se-resize',
'sw-resize',
'ew-resize',
'ns-resize',
'nesw-resize',
'nwse-resize',
'zoom-in',
'zoom-out',
];
const root = document.getElementById('root');
for(let cursor of cursors) {
let cursor_card = document.createElement('div');
cursor_card.setAttribute('class', cursor +' card');
cursor_card.innerHTML = cursor;
cursor_card.style.cursor = cursor;
root.appendChild(cursor_card);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.