grtner

@mixin linear-gradient($firstColor, $secondColor) {
  background-color: $secondColor; /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from($firstColor), to($secondColor)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, $firstColor, $secondColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, $firstColor, $secondColor); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, $firstColor, $secondColor); /* IE10 */
  background-image:      -o-linear-gradient(top, $firstColor, $secondColor); /* Opera 11.10+ */
  background-image:         linear-gradient(top, $firstColor, $secondColor);
}

grtner

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;

grtner

// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all 
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break

grtner

/*
	Triangle with Shadow
*/

.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);

grtner

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
	background: white;
	font: 120% sans-serif;
}

grtner

.arrow-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;

	border-bottom: 5px solid black;
}

.arrow-down {

grtner

/**
 * Tooltip with CSS3
 */
html { 
background-color: #b2bec2;
background-image: linear-gradient(top, rgb(225, 229, 222), rgb(131, 151, 166));
min-height: 100%; }

body { width: 500px; margin: 100px auto; color: white; font-size: 1em; line-height: 1.5; font-family: "Helvetica";}
p {text-shadow: 0 1px 1px rgba(0,0,0,.1); margin-bottom: 1.5em;}

grtner

/* Glossy overlay */

html {
	min-height: 100%;
	background: -webkit-linear-gradient(#000, #445);
}

figure {
	width: 162px;
	height: 162px;

grtner

/**
 * Animated Article view 
 */
html { 
font: 300 .75em/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #666;
background-color: #b2bec2;
background-image: 
radial-gradient(50% 0%, rgb(144, 141, 161), rgb(74, 82, 115));
min-height: 100%; 

grtner

/**
 * Pure CSS Slide Toggle by joshnh
 */


html {
    background-color: #e4ded4;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
    height: 100%;