Skip to content

Instantly share code, notes, and snippets.

View sarukuku's full-sized avatar

Joonas Salovaara sarukuku

View GitHub Profile
@sarukuku
sarukuku / dabblet.css
Created April 21, 2012 17:57
Image with an on hover fade in-out caption.
/**
* Image with an on hover fade in-out caption.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald);
/**
* Natural box-model
*/
@sarukuku
sarukuku / dabblet.css
Created April 22, 2012 09:49
Responsive black "top-fixed" menu.
/**
* Responsive black "top-fixed" menu.
*/
@import url("http://fonts.googleapis.com/css?family=Oswald");
@import url("http://img.js-design.org/js-design.org/icons/icons.css");
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@sarukuku
sarukuku / dabblet.css
Created April 26, 2012 12:21
Responsive blog post template with a picture / youtube embed / vimeo embed / code snippet support.
/**
* Responsive blog post template with a picture / youtube embed / vimeo embed / code snippet support.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
/**
* Natural box-model
*/
@sarukuku
sarukuku / dabblet.css
Created April 28, 2012 15:00
More simple responsive black "top-fixed" menu.
/**
* More simple responsive black "top-fixed" menu.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@sarukuku
sarukuku / dabblet.css
Created May 4, 2012 13:29
Image with an on hover fade in-out caption.
/**
* Image with an on hover fade in-out caption.
*/
@import url(http://fonts.googleapis.com/css?family=Oswald);
/**
* Natural box-model
*/
@sarukuku
sarukuku / dabblet.css
Created August 23, 2012 12:48
Rotating CSS Circles
/**
* Rotating CSS Circles
*/
/* Natural box layout model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.ch-item {
width: 100%;
height: 100%;
@sarukuku
sarukuku / dabblet.css
Created August 23, 2012 13:37
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@sarukuku
sarukuku / dabblet.css
Created February 4, 2013 15:43
Letter Box
/**
* Letter Box
*/
div {
display: block;
position: absolute;
width: 150px;
height: 210px;
background-color: #333;
@sarukuku
sarukuku / dabblet.css
Created February 13, 2013 15:04
Vahdin: marks list
/**
* Vahdin: marks list
*/
* {
outline: red;
}
body {
padding: 0;
# Good sources
https://github.com/stuttter
# Good plugins
http://www.advancedcustomfields.com/pro/