Skip to content

Instantly share code, notes, and snippets.

@iign

iign/dabblet.css

Created February 1, 2013 17:50
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 iign/4692878 to your computer and use it in GitHub Desktop.
Save iign/4692878 to your computer and use it in GitHub Desktop.
Download ZIP
Z
Raw
dabblet.css
/**
* Z
*/
body{
margin: 50px
}
.cover {
position: relative;
background: transparent;
height: 300px;
width: 300px;
border: 1px solid #f3f3f3;
overflow:hidden;
/* Gradient */
background: #fcdb35; /* Old browsers */
background: -moz-linear-gradient(top, #ffe500 1%, #ff2828 39%, #ab7be5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffe500), color-stop(39%,#ff2828), color-stop(100%,#ab7be5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffe5001%,#ff2828 39%,#ab7be5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffe500 1%,#ff2828 39%,#ab7be5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffe500 1%,#ff2828 39%,#ab7be5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffe500 1%,#ff2828 39%,#ab7be5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcdb35', endColorstr='#ab7be5',GradientType=0 ); /* IE6-9 */
}
.cover:after {
-webkit-transform: matrix(1, 0, 0, 2, 0, 0);
border-color: rgba(23, 80, 213, 0);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #1750d5;
border-width: 299px;
left: 50%;
margin-left: -299px;
bottom: 0
}
Raw
dabblet.html
<body>
<div class="cover"></div>
</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