Skip to content

Instantly share code, notes, and snippets.

@greystate

greystate/dabblet.css

Created February 27, 2020 23:41
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/83df4e77929a14a7cf5f9082ddc1f044 to your computer and use it in GitHub Desktop.
Save greystate/83df4e77929a14a7cf5f9082ddc1f044 to your computer and use it in GitHub Desktop.
Download ZIP
Clip Path Exploration
Raw
dabblet.css
/**
* Clip Path Exploration
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
img {
transition: 0.5s ease;
max-width: 80%;
display: block;
min-height: 30em;
margin: auto;
background-color: lime;
background-size: contain;
-webkit-clip-path: polygon(0 100%, 20% 16%, 100% 0, 80% 84%);
}
img.unclipped {
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<img class="unclipped" src="https://i.picsum.photos/id/1016/700/425.jpg">
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment