Skip to content

Instantly share code, notes, and snippets.

@jordangray

jordangray/dabblet.css

Created June 19, 2017 16:26
Show Gist options
  • Save jordangray/ea08a7abef4bbdcf02aba80abee66e2c to your computer and use it in GitHub Desktop.
Save jordangray/ea08a7abef4bbdcf02aba80abee66e2c to your computer and use it in GitHub Desktop.
Download ZIP
Automasking
Raw
dabblet.css
/**
* Automasking
*/
.mask-content {
position: relative;
padding: .2em 0;
width: 1.2em;
text-align: center;
}
.mask-content:not([data-value=""]) { background: lightgreen; }
.mask-content:not([data-value=""]):before,
.mask-content:not([data-value=""]):after {
transition: opacity 1s step-end;
position: absolute;
}
.mask-content[data-value=""]:before {
content: attr(data-value);
opacity: 1;
}
.mask-content[data-value=""]:after {
content: '*';
opacity: 0;
}
.mask-content:not([data-value=""]):before {
opacity: 1;
}
.mask-content:not([data-value=""]):after {
opacity: 1;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="mask-content" data-value="2">_</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment