Compass Mixins - Revision history

Bacchas at 23:10, 22 August 2016

2016-08-22T23:10:05Z

← Older revision		Revision as of 23:10, 22 August 2016
Line 1:		Line 1:
	==Gradients ==		==Gradients ==
	[http://compass-style.org/examples/compass/css3/gradient/ Example]		[http://compass-style.org/examples/compass/css3/gradient/ Example Compass Website]

	// This will yield a radial gradient with an apparent specular highlight		// This will yield a radial gradient with an apparent specular highlight
	#radial-gradient {		#radial-gradient {

Bacchas at 23:09, 22 August 2016

2016-08-22T23:09:23Z

← Older revision		Revision as of 23:09, 22 August 2016
Line 1:		Line 1:
	==Gradients ==		==Gradients ==
			[http://compass-style.org/examples/compass/css3/gradient/ Example]
	// This will yield a radial gradient with an apparent specular highlight		// This will yield a radial gradient with an apparent specular highlight
	#radial-gradient {		#radial-gradient {

Bacchas at 23:08, 22 August 2016

2016-08-22T23:08:32Z

← Older revision		Revision as of 23:08, 22 August 2016
Line 3:		Line 3:
	#radial-gradient {		#radial-gradient {
	@include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));		@include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
	}		}

	// This yields a linear gradient spanning from the upper left corner to the lower right corner		// This yields a linear gradient spanning from the upper left corner to the lower right corner
	#linear-gradient {		#linear-gradient {
	@include background-image(linear-gradient(to bottom right, white, #dddddd));		@include background-image(linear-gradient(to bottom right, white, #dddddd));
	}		}

	// This yields a gradient starting at the top with #fff, ending in #aaa		// This yields a gradient starting at the top with #fff, ending in #aaa

Bacchas at 23:08, 22 August 2016

2016-08-22T23:08:19Z

← Older revision		Revision as of 23:08, 22 August 2016
Line 1:		Line 1:
	==Gradients ==		==Gradients ==
	// This will yield a radial gradient with an apparent specular highlight		// This will yield a radial gradient with an apparent specular highlight
	#radial-gradient {		#radial-gradient {
	@include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));		@include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
	}		}

	// This yields a linear gradient spanning from the upper left corner to the lower right corner		// This yields a linear gradient spanning from the upper left corner to the lower right corner
	#linear-gradient {		#linear-gradient {
	@include background-image(linear-gradient(to bottom right, white, #dddddd));		@include background-image(linear-gradient(to bottom right, white, #dddddd));
	}		}

Bacchas: Created page with "==Gradients == // This will yield a radial gradient with an apparent specular highlight #radial-gradient { @include background-image(radial-gradient(45px 45px, cyan 10px, do..."

2016-08-22T23:07:57Z

Created page with "==Gradients == // This will yield a radial gradient with an apparent specular highlight #radial-gradient { @include background-image(radial-gradient(45px 45px, cyan 10px, do..."

New page

==Gradients ==
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient {
@include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
}

// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient {
@include background-image(linear-gradient(to bottom right, white, #dddddd));
}

// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient {
@include background-image(linear-gradient(white, #aaaaaa));
}

// Same as above but with a #ccc at the halfway point
#v-gradient-2 {
@include background-image(linear-gradient(white, #cccccc, #aaaaaa));
}

// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
#v-gradient-3 {
@include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
}

// This yields a horizontal linear gradient spanning from left to right.
#h-gradient {
@include background-image(linear-gradient(to right, white, #dddddd));
}

#svg-gradient {
$svg-gradient-shim-threshold: 1 !global;
@include background-image(linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2));
width: 80px;
height: 80px;
}

#angle-gradient {
$svg-gradient-shim-threshold: 1 !global;
@include background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
width: 80px;
height: 80px;
}