Skip to content

Instantly share code, notes, and snippets.

@greystate

greystate/dabblet.css

Created February 27, 2020 23:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save greystate/72fe4c075f4d13141f7ed9141a345c0e to your computer and use it in GitHub Desktop.
Save greystate/72fe4c075f4d13141f7ed9141a345c0e to your computer and use it in GitHub Desktop.
Download ZIP
Text over image w/ CSS Grid
Raw
dabblet.css
/**
* Text over image w/ CSS Grid
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
.heroic {
display: grid;
}
.heroic img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
}
.heroic figcaption {
grid-area: 1 / 1;
margin: auto;
text-align: center;
font-size: 5em;
font-family: Helvetica, sans-serif;
color: #fefefe;
text-shadow: 0 4px 4px rgba(0, 20, 20, 0.2);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<figure class="heroic">
<img src="https://picsum.photos/seed/chriz/800/400" width="800" height="400">
<figcaption>
See our products!
</figcaption>
</figure>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","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