Skip to content

Instantly share code, notes, and snippets.

@yinbowen

yinbowen/dabblet.css

Forked from csssecrets/dabblet.css
Last active November 28, 2017 11:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yinbowen/7c9650f848d621e50bda20eb913e23e5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yinbowen/7c9650f848d621e50bda20eb913e23e5 to your computer and use it in GitHub Desktop.
Download ZIP
Translucent borders
Raw
dabblet.css
/**
* Translucent borders
*/
body {
background: #d2c6a8;
}
div {
margin: auto;
line-height: 240px;
text-align: center;
font-size: 230px;
font-weight: bold;
color: deeppink;
background-size: cover;
text-fill-color: transparent;
}
.img_bg {
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493353832&di=c063b6b9c89082e96ffee0766112ffec&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0111%2F07%2F3.jpg%21960.jpg) no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
}
.gradient_bg {
background: linear-gradient(to right, red, green 50%, blue);
background-size: cover;
-webkit-background-clip: text;
}
Raw
dabblet.html
<div class="img_bg">51NB</div>
<div class="gradient_bg">51NB</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