Skip to content

Instantly share code, notes, and snippets.

@Malleys

Malleys/dabblet.css

Last active July 7, 2017 03:30
Show Gist options
  • Save Malleys/c4c4c96e254aea55cf2396b7dc0c804c to your computer and use it in GitHub Desktop.
Save Malleys/c4c4c96e254aea55cf2396b7dc0c804c to your computer and use it in GitHub Desktop.
Download ZIP
Cursors
Raw
dabblet.css
/* Cursors */
/* (https://www.w3.org/TR/css-ui-3/#cursor) */
.cursor {
display: inline-block;
width: 8em;
height: 8em;
background: #eee;
margin: 0.2em;
user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-origin: content-box;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
padding-top: 5.65em;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
opacity: 0.9;
font: bold 0.75em / 1.45 Menlo, Consolas, monospace;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
"auto | default | none | context-menu | help | pointer | progress | wait |cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll |zoom-in | zoom-out "
.split(/\s*\|\s*/).forEach(function(c) {
var element = document.createElement("div");
element.style.cursor = "-webkit-" + c;
element.style.cursor = c;
element.textContent = c;
element.classList.add("cursor");
document.body.appendChild(element);
});
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment