Skip to content

Instantly share code, notes, and snippets.

@danishsatkut

danishsatkut/dabblet.css

Last active November 5, 2015 09:57
Show Gist options
  • Save danishsatkut/aa5fe905843ada1fa689 to your computer and use it in GitHub Desktop.
Save danishsatkut/aa5fe905843ada1fa689 to your computer and use it in GitHub Desktop.
Download ZIP
Album design for Supersonic
Raw
dabblet.css
/**
* Album design for Supersonic
*
* Designed by: Danish Satkut (@Agent47DarkSoul)
*/
body {
margin: 25px;
background-color: #DDD;
}
.album-container {
margin: 40px;
position: relative;
display: inline-block;
}
.image-container {
display: inline-block;
height: 219px;
border: 5px solid white;
border-radius: 5px;
}
.image-container.original {
position: absolute;
z-index: 1;
}
.image-container.rotated {
-webkit-transform: rotate(-0.015turn);
-moz-transform: rotate(-0.015turn);
-o-transform: rotate(-0.015turn);
transform: rotate(-0.015turn);
}
.image-container img {
width: 350px; height: 219px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="album-container">
<div class="image-container original">
<img src="http://cdn-images.spinr.in/supersonic/staging/images/album_images/images/12/original/APP_1993.jpg?1446187344" />
</div>
<div class="image-container rotated">
<img src="http://cdn-images.spinr.in/supersonic/staging/images/album_images/images/12/original/APP_1993.jpg?1446187344" />
</div>
</div>
<div class="album-container">
<div class="image-container original">
<img src="http://cdn-images.spinr.in/supersonic/staging/images/album_images/images/93/original/_93A0221.jpg?1446188215" />
</div>
<div class="image-container rotated">
<img src="http://cdn-images.spinr.in/supersonic/staging/images/album_images/images/93/original/_93A0221.jpg?1446188215" />
</div>
</div>
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