Skip to content

Instantly share code, notes, and snippets.

@jackarmley

jackarmley/dabblet.css

Created April 23, 2013 02:00
Show Gist options
  • Save jackarmley/5440242 to your computer and use it in GitHub Desktop.
Save jackarmley/5440242 to your computer and use it in GitHub Desktop.
Download ZIP
CSS gradient vertical ribbon
Raw
dabblet.css
/**
* CSS gradient vertical ribbon
*/
&:after{
content:" ";
display:block;
position:absolute;
top:-4px;
right:1em;
.setsize(20px,80px);
background:
-webkit-linear-gradient(90deg,fade(@white,60%) 50%,transparent 50%) repeat-y 10% 0,
-webkit-linear-gradient(90deg,fade(@white,60%) 50%,transparent 50%) repeat-y 90% 0,
-webkit-linear-gradient(-45deg, red 50%, @white 50%) no-repeat 0 100%,
-webkit-linear-gradient(225deg, red 50%, @white 50%) no-repeat 10px 100%,
-webkit-linear-gradient(0deg,red 50%, red 50%) repeat-x 0 0
;
background-size:
1px 5px,
1px 5px,
10px 10px,
10px 10px,
100% 70px
;
box-shadow:
inset 0 1px 0 0 darken(red,20%),
inset 1px 0 0 0 darken(red,10%),
inset -1px 0 0 0 darken(red,10%),
inset 0 2px 0 0 fade(@white,50%)
;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
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