Skip to content

Instantly share code, notes, and snippets.

@valerysntx

valerysntx/dabblet.css

Last active December 17, 2015 22:19
Show Gist options
  • Save valerysntx/5681614 to your computer and use it in GitHub Desktop.
Save valerysntx/5681614 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
min-height: 100%;
backgroud-src: url('http://29a.ch/slides/2012/webglwater/photos/juska_190113291_291164d962_o.jpg');
background: none;
}
ul{
display:none;
}
body:hover {
min-height: 100%;
width: 100%;
height:100%;
width: 300px;
height: 300px;
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
background: url(http://geo-media.beatport.com/image_size/500x500/5582176.jpg?standalone=1) repeat-x white;
background-position: 0 0;
transform: perspective(23);
display: inline-block;
transform-style: preserve-3d;
transition: all 900ms ease;
border: solid 1px #5a6a6a;
}
.sm {display:none;margin: 0 0 0 0;padding:0;list-style:none;}
li {
width:300px;
height: 300px;
/*background:transparent;*/
float: left;
margin: 10px;
}
.sm a {;
width: 300px;
height: 300px;
-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
box-shadow:3px 5px 7px rgba(0,0,0,.7);
background: url(http://geo-media.beatport.com/image_size/500x500/5582176.jpg?standalone=1) repeat-x white;
background-position: 0 0;
transform: perspective(23);
display: inline-block;
transform-style: preserve-3d;
transition: all 900ms ease;
border: solid 1px #5a6a6a;
}
.sm a:hover {
border: solid 1px white;
background-position: -210px 35px;
transform: rotateY(1deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul class="sm">
<li><a href="zryandex.ru" target="_blank"></a></li>
<li><a href="dabblet.com" target="_blank"></a></li>
</ul>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@vmysla
Copy link

vmysla commented May 31, 2013

http://jsfiddle.net/BaY2u/

I have corrected the fiddle - http://jsfiddle.net/BaY2u/3/

You should examine the dabblet.com for realtime html5 playground.
Among advantages, there is integration with gist, popups for css metric units,
showing the actual sizes, colors, durations etc. Also it automatically detects right
prefixes for browsers, so no need for -webkit or -moz duplicates in your stylesheets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment