Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updating to final linear-gradient syntax - work in progress

  • Loading branch information...
commit b65689917d7576315a0c366ef122ce1b94d1245e 1 parent 220dc17
@lojjic authored
View
42 sources/BackgroundRenderer.js
@@ -260,46 +260,32 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
stops = info.stops,
stopCount = stops.length,
PI = Math.PI,
- GradientUtil = PIE.GradientUtil,
- perpendicularIntersect = GradientUtil.perpendicularIntersect,
- distance = GradientUtil.distance,
- metrics = GradientUtil.getGradientMetrics( el, w, h, info ),
+ metrics = PIE.GradientUtil.getGradientMetrics( el, w, h, info ),
angle = metrics.angle,
- startX = metrics.startX,
- startY = metrics.startY,
- startCornerX = metrics.startCornerX,
- startCornerY = metrics.startCornerY,
- endCornerX = metrics.endCornerX,
- endCornerY = metrics.endCornerY,
- deltaX = metrics.deltaX,
- deltaY = metrics.deltaY,
lineLength = metrics.lineLength,
- vmlAngle, vmlGradientLength, vmlColors,
- stopPx, vmlOffsetPct,
- p, i, j, before, after;
+ vmlAngle, vmlColors,
+ stopPx, i, j, before, after;
// In VML land, the angle of the rendered gradient depends on the aspect ratio of the shape's
// bounding box; for example specifying a 45 deg angle actually results in a gradient
// drawn diagonally from one corner to its opposite corner, which will only appear to the
- // viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
+ // viewer as 45 degrees if the shape is equilateral. We adjust for this by taking the x/y deltas
// between the start and end points, multiply one of them by the shape's aspect ratio,
// and get their arctangent, resulting in an appropriate VML angle. If the angle is perfectly
// horizontal or vertical then we don't need to do this conversion.
- vmlAngle = ( angle % 90 ) ? Math.atan2( deltaX * w / h, deltaY ) / PI * 180 : ( angle + 90 );
-
- // VML angles are 180 degrees offset from CSS angles
- vmlAngle += 180;
+ // VML angles go in the opposite direction from CSS angles.
+ vmlAngle = ( angle % 90 ) ?
+ Math.atan2( metrics.startY - metrics.endY, ( metrics.endX - metrics.startX ) * w / h ) / PI * 180 - 90 :
+ -angle;
+ while( vmlAngle < 0 ) {
+ vmlAngle += 360;
+ }
vmlAngle = vmlAngle % 360;
// Add all the stops to the VML 'colors' list, including the first and last stops.
// For each, we find its pixel offset along the gradient-line; if the offset of a stop is less
- // than that of its predecessor we increase it to be equal. We then map that pixel offset to a
- // percentage along the VML gradient-line, which runs from shape corner to corner.
- p = perpendicularIntersect( startCornerX, startCornerY, angle, endCornerX, endCornerY );
- vmlGradientLength = distance( startCornerX, startCornerY, p[0], p[1] );
+ // than that of its predecessor we increase it to be equal.
vmlColors = [];
- p = perpendicularIntersect( startX, startY, angle, startCornerX, startCornerY );
- vmlOffsetPct = distance( startX, startY, p[0], p[1] ) / vmlGradientLength * 100;
// Find the pixel offsets along the CSS3 gradient-line for each stop.
stopPx = [];
@@ -321,10 +307,10 @@ PIE.BackgroundRenderer = PIE.RendererBase.newRenderer( {
stopPx[ i ] = Math.max( stopPx[ i ], stopPx[ i - 1 ] );
}
- // Convert to percentage along the VML gradient line and add to the VML 'colors' value
+ // Convert to percentage along the gradient line and add to the VML 'colors' value
for( i = 0; i < stopCount; i++ ) {
vmlColors.push(
- ( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el )
+ ( stopPx[ i ] / lineLength * 100 ) + '% ' + stops[i].color.colorValue( el )
);
}
View
36 sources/BackgroundStyleInfo.js
@@ -13,6 +13,8 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
originAndClipIdents: { 'padding-box':1, 'border-box':1, 'content-box':1 },
positionIdents: { 'top':1, 'right':1, 'bottom':1, 'left':1, 'center':1 },
sizeIdents: { 'contain':1, 'cover':1 },
+ tbIdents: { 'top': 1, 'bottom': 1 },
+ lrIdents: { 'left': 1, 'right': 1 },
propertyNames: {
CLIP: 'backgroundClip',
COLOR: 'backgroundColor',
@@ -48,7 +50,7 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
* },
* {
* imgType: 'linear-gradient',
- * gradientStart: <PIE.BgPosition>,
+ * gradientTo: [<'top' | 'bottom'>, <'left' | 'right'>?],
* angle: <PIE.Angle>,
* stops: [
* { color: <PIE.Color>, offset: <PIE.Length> },
@@ -71,7 +73,7 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
tokType, tokVal,
beginCharIndex = 0,
positionIdents = this.positionIdents,
- gradient, stop, width, height,
+ gradient, stop, width, height, gradientTo, len, tbIdents, lrIdents,
props = { bgImages: [] };
function isBgPosToken( token ) {
@@ -112,7 +114,7 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
// Color stop - must start with color
if( tokType & type_color ) {
// if we already have an angle/position, make sure that the previous token was a comma
- if( gradient.angle || gradient.gradientStart ) {
+ if( gradient.angle || gradient.gradientTo ) {
token = tokenizer.prev();
if( token.tokenType !== type_operator ) {
break; //fail
@@ -132,16 +134,28 @@ PIE.BackgroundStyleInfo = PIE.StyleInfoBase.newStyleInfo( {
}
}
// Angle - can only appear in first spot
- else if( tokType & tok_type.ANGLE && !gradient.angle && !stop.color && !gradient.stops.length ) {
+ else if( tokType & tok_type.ANGLE && !gradient.angle && !gradient.gradientTo && !stop.color && !gradient.stops.length ) {
gradient.angle = new PIE.Angle( token.tokenValue );
}
- else if( isBgPosToken( token ) && !gradient.gradientStart && !stop.color && !gradient.stops.length ) {
- tokenizer.prev();
- gradient.gradientStart = new PIE.BgPosition(
- tokenizer.until( function( t ) {
- return !isBgPosToken( t );
- }, false )
- );
+ // "to <side-or-corner>" - can only appear in first spot
+ else if( tokType & tok_type.IDENT && tokVal === 'to' && !gradient.gradientTo && !gradient.angle && !stop.color && !gradient.stops.length ) {
+ tbIdents = this.tbIdents;
+ lrIdents = this.lrIdents;
+
+ gradientTo = tokenizer.until( function( t ) {
+ return !(t && t.tokenType & tok_type.IDENT && ( t.tokenValue in tbIdents || t.tokenValue in lrIdents ));
+ } );
+ len = gradientTo.length;
+ gradientTo = [ gradientTo[0] && gradientTo[0].tokenValue, gradientTo[1] && gradientTo[1].tokenValue ];
+
+ // bail unless there are 1 or 2 values, or if the 2 values are from the same pair of sides
+ if ( len < 1 || len > 2 || ( len > 1 && (
+ ( gradientTo[0] in tbIdents && gradientTo[1] in tbIdents ) ||
+ ( gradientTo[0] in lrIdents && gradientTo[1] in lrIdents )
+ ) ) ) {
+ break;
+ }
+ gradient.gradientTo = gradientTo;
}
else if( tokType & type_operator && tokVal === ',' ) {
if( stop.color ) {
View
122 sources/GradientUtil.js
@@ -3,97 +3,67 @@
*/
PIE.GradientUtil = {
+ toSideAngles: {
+ 'top': 0,
+ 'right': 90,
+ 'bottom': 180,
+ 'left': 270
+ },
+
getGradientMetrics: function( el, width, height, gradientInfo ) {
var angle = gradientInfo.angle,
- startPos = gradientInfo.gradientStart,
+ toPos = gradientInfo.gradientTo,
+ dX, dY,
+ endPoint,
startX, startY,
- endX, endY,
- startCornerX, startCornerY,
- endCornerX, endCornerY,
- deltaX, deltaY,
- p, UNDEF;
+ endX, endY;
- // Find the "start" and "end" corners; these are the corners furthest along the gradient line.
- // This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding
- // the total length of the VML rendered gradient-line corner to corner.
- function findCorners() {
- startCornerX = ( angle >= 90 && angle < 270 ) ? width : 0;
- startCornerY = angle < 180 ? height : 0;
- endCornerX = width - startCornerX;
- endCornerY = height - startCornerY;
+ // If an angle was specified, just use it
+ if (angle) {
+ angle = angle.degrees();
}
-
- // Normalize the angle to a value between [0, 360)
- function normalizeAngle() {
- while( angle < 0 ) {
- angle += 360;
+ // If a to-position was specified, find the appropriate angle for it
+ else if (toPos) {
+ // To a corner; find the adjacent corners and use the angle perpendicular to them
+ if (toPos[1]) {
+ dX = ( toPos[0] == 'top' || toPos[1] == 'top' ) ? width : -width;
+ dY = ( toPos[0] == 'left' || toPos[1] == 'left' ) ? -height : height;
+ angle = Math.atan2(dY, dX) * 180 / Math.PI;
}
- angle = angle % 360;
- }
-
- // Find the start and end points of the gradient
- if( startPos ) {
- startPos = startPos.coords( el, width, height );
- startX = startPos.x;
- startY = startPos.y;
- }
- if( angle ) {
- angle = angle.degrees();
-
- normalizeAngle();
- findCorners();
-
- // If no start position was specified, then choose a corner as the starting point.
- if( !startPos ) {
- startX = startCornerX;
- startY = startCornerY;
+ // To a side; map to a vertical/horizontal angle
+ else {
+ angle = this.toSideAngles[toPos[0]];
}
-
- // Find the end position by extending a perpendicular line from the gradient-line which
- // intersects the corner opposite from the starting corner.
- p = PIE.GradientUtil.perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );
- endX = p[0];
- endY = p[1];
- }
- else if( startPos ) {
- // Start position but no angle specified: find the end point by rotating 180deg around the center
- endX = width - startX;
- endY = height - startY;
}
+ // Neither specified; default is top to bottom
else {
- // Neither position nor angle specified; create vertical gradient from top to bottom
- startX = startY = endX = 0;
- endY = height;
+ angle = 180;
}
- deltaX = endX - startX;
- deltaY = endY - startY;
- if( angle === UNDEF ) {
- // Get the angle based on the change in x/y from start to end point. Checks first for horizontal
- // or vertical angles so they get exact whole numbers rather than what atan2 gives.
- angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :
- ( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :
- -Math.atan2( deltaY, deltaX ) / Math.PI * 180
- )
- );
- normalizeAngle();
- findCorners();
+ // Normalize the angle to a value between [0, 360)
+ while( angle < 0 ) {
+ angle += 360;
}
+ angle = angle % 360;
+
+ // Find the end point of the gradient line, extending the angle from the center point
+ // to where it intersects the perpendicular line passing through the nearest corner.
+ endPoint = PIE.GradientUtil.perpendicularIntersect(width / 2, height / 2, angle,
+ ( angle >= 180 ? 0 : width ), ( angle < 90 || angle > 270 ? 0 : height )
+ );
+ endX = endPoint[0];
+ endY = endPoint[1];
+ startX = width - endX;
+ startY = height - endY;
return {
angle: angle,
- startX: startX,
- startY: startY,
endX: endX,
endY: endY,
- startCornerX: startCornerX,
- startCornerY: startCornerY,
- endCornerX: endCornerX,
- endCornerY: endCornerY,
- deltaX: deltaX,
- deltaY: deltaY,
+ startX: startX,
+ startY: startY,
lineLength: PIE.GradientUtil.distance( startX, startY, endX, endY )
- }
+ };
},
/**
@@ -110,16 +80,16 @@ PIE.GradientUtil = {
// Handle straight vertical and horizontal angles, for performance and to avoid
// divide-by-zero errors.
if( angle === 0 || angle === 180 ) {
- return [ x2, y1 ];
+ return [ x1, y2 ];
}
else if( angle === 90 || angle === 270 ) {
- return [ x1, y2 ];
+ return [ x2, y1 ];
}
else {
// General approach: determine the Ax+By=C formula for each line (the slope of the second
// line is the negative inverse of the first) and then solve for where both formulas have
// the same x/y values.
- var a1 = Math.tan( -angle * Math.PI / 180 ),
+ var a1 = Math.tan( ( angle - 90 ) * Math.PI / 180 ),
c1 = a1 * x1 - y1,
a2 = -1 / a1,
c2 = a2 * x2 - y2,
View
22 tests/gradient-patterns.html
@@ -87,10 +87,10 @@
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
- background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+ background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
- -pie-background: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+ -pie-background: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent) 0 0 / 50px 50px, #c16;
}
@@ -113,8 +113,8 @@
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
- background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
- -pie-background: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90;
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+ -pie-background: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90;
}
.checkered {
@@ -139,13 +139,13 @@
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
- linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
+ linear-gradient(135deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
- linear-gradient(-45deg, transparent 75%, #555 75%);
+ linear-gradient(135deg, transparent 75%, #555 75%);
-pie-background: linear-gradient(45deg, #555 25%, transparent 25%, transparent) 0 0 / 50px 50px,
- linear-gradient(-45deg, #555 25%, transparent 25%, transparent) 0 0 / 50px 50px,
+ linear-gradient(135deg, #555 25%, transparent 25%, transparent) 0 0 / 50px 50px,
linear-gradient(45deg, transparent 75%, #555 75%) 0 0 / 50px 50px,
- linear-gradient(-45deg, transparent 75%, #555 75%) 0 0 / 50px 50px;
+ linear-gradient(135deg, transparent 75%, #555 75%) 0 0 / 50px 50px;
}
.picnic {
@@ -161,9 +161,9 @@
background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
- linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
+ linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px,
- linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
+ linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
}
</style>
@@ -209,7 +209,7 @@
linear-gradient(0deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) 0 0 / 20px,
#131313
- " title="Carbon" data-author="Atle Mo (design), SŽbastien Grosjean (code)" data-author-url="http://www.zencocoon.com/"></li>
+ " title="Carbon" data-author="Atle Mo (design), Sbastien Grosjean (code)" data-author-url="http://www.zencocoon.com/"></li>
<!--
<li style="background:
View
190 tests/gradient-tests.html
@@ -42,131 +42,170 @@
#vert1 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top, yellow, blue);
- -pie-background: linear-gradient(top, yellow, blue);
+ background: linear-gradient(to bottom, yellow, blue);
+ -pie-background: linear-gradient(to bottom, yellow, blue);
}
#vert2 {
background: -webkit-gradient(linear, left bottom, left top, from(blue), to(yellow));
background: -moz-linear-gradient(bottom, blue, yellow);
- -pie-background: linear-gradient(bottom, blue, yellow);
+ background: linear-gradient(to top, blue, yellow);
+ -pie-background: linear-gradient(to top, blue, yellow);
}
#vert3 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(-90deg, yellow, blue);
- -pie-background: linear-gradient(-90deg, yellow, blue);
+ background: linear-gradient(180deg, yellow, blue);
+ -pie-background: linear-gradient(180deg, yellow, blue);
}
#vert4 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(270deg, yellow, blue);
- -pie-background: linear-gradient(270deg, yellow, blue);
+ background: linear-gradient(-180deg, yellow, blue);
+ -pie-background: linear-gradient(-180deg, yellow, blue);
}
#vert5 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top, yellow 0%, blue 100%);
- -pie-background: linear-gradient(top, yellow 0%, blue 100%);
+ background: linear-gradient(to bottom, yellow 0%, blue 100%);
+ -pie-background: linear-gradient(to bottom, yellow 0%, blue 100%);
}
#vert6 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
- background: -moz-linear-gradient(center top, yellow, blue);
- -pie-background: linear-gradient(center top, yellow, blue);
- }
- #vert7 {
- background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(blue));
background: -moz-linear-gradient(yellow, blue);
+ background: linear-gradient(yellow, blue);
-pie-background: linear-gradient(yellow, blue);
}
#horiz1 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(left, yellow, blue);
- -pie-background: linear-gradient(left, yellow, blue);
+ background: linear-gradient(to right, yellow, blue);
+ -pie-background: linear-gradient(to right, yellow, blue);
}
#horiz2 {
background: -webkit-gradient(linear, right top, left top, from(blue), to(yellow));
background: -moz-linear-gradient(right, blue, yellow);
- -pie-background: linear-gradient(right, blue, yellow);
+ background: linear-gradient(to left, blue, yellow);
+ -pie-background: linear-gradient(to left, blue, yellow);
}
#horiz3 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(0, yellow, blue);
- -pie-background: linear-gradient(0, yellow, blue);
+ background: linear-gradient(90deg, yellow, blue);
+ -pie-background: linear-gradient(90deg, yellow, blue);
}
#horiz4 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(360deg, yellow, blue);
- -pie-background: linear-gradient(360deg, yellow, blue);
+ background: linear-gradient(450deg, yellow, blue);
+ -pie-background: linear-gradient(450deg, yellow, blue);
}
#horiz5 {
background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
background: -moz-linear-gradient(left, yellow 0%, blue 100%);
- -pie-background: linear-gradient(left, yellow 0%, blue 100%);
+ background: linear-gradient(to right, yellow 0%, blue 100%);
+ -pie-background: linear-gradient(to right, yellow 0%, blue 100%);
}
- #horiz6 {
- background: -webkit-gradient(linear, left top, right top, from(yellow), to(blue));
- background: -moz-linear-gradient(left center, yellow, blue);
- -pie-background: linear-gradient(left center, yellow, blue);
- }
-
#diag1 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(top left, yellow, blue);
- -pie-background: linear-gradient(top left, yellow, blue);
+ background: linear-gradient(to bottom right, yellow, blue);
+ -pie-background: linear-gradient(to bottom right, yellow, blue);
}
#diag2 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
- background: -moz-linear-gradient(0 0, yellow, blue);
- -pie-background: linear-gradient(0 0, yellow, blue);
+ background: -moz-linear-gradient(top left, yellow, blue);
+ background: linear-gradient(to right bottom, yellow, blue);
+ -pie-background: linear-gradient(to right bottom, yellow, blue);
}
#diag3 {
- background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
- background: -moz-linear-gradient(top 0px left 0px, yellow, blue);
- -pie-background: linear-gradient(top 0px left 0px, yellow, blue);
+ background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
+ background: -moz-linear-gradient(bottom right, blue, yellow);
+ background: linear-gradient(to top left, blue, yellow);
+ -pie-background: linear-gradient(to top left, blue, yellow);
}
#diag4 {
background: -webkit-gradient(linear, right bottom, left top, from(blue), to(yellow));
background: -moz-linear-gradient(bottom right, blue, yellow);
- -pie-background: linear-gradient(bottom right, blue, yellow);
+ background: linear-gradient(to left top, blue, yellow);
+ -pie-background: linear-gradient(to left top, blue, yellow);
}
#diag5 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(-45deg, yellow, blue);
- -pie-background: linear-gradient(-45deg, yellow, blue);
+ background: linear-gradient(135deg, yellow, blue);
+ -pie-background: linear-gradient(135deg, yellow, blue);
}
#diag6 {
background: -webkit-gradient(linear, left top, right bottom, from(yellow), to(blue));
background: -moz-linear-gradient(315deg, yellow, blue);
- -pie-background: linear-gradient(315deg, yellow, blue);
+ background: linear-gradient(495deg, yellow, blue);
+ -pie-background: linear-gradient(495deg, yellow, blue);
}
+ #toCorner1 {
+ background: linear-gradient(to top right, red, white, blue);
+ -pie-background: linear-gradient(to top right, red, white, blue);
+ width: 8em;
+ }
+ #toCorner2 {
+ background: linear-gradient(to top right, red, white, blue);
+ -pie-background: linear-gradient(to top right, red, white, blue);
+ width: 400px;
+ }
+ #toCorner3 {
+ background: linear-gradient(to top right, red, white, blue);
+ -pie-background: linear-gradient(to top right, red, white, blue);
+ width: 60px;
+ }
+ #toCorner4 {
+ background: linear-gradient(to bottom right, red, white, blue);
+ -pie-background: linear-gradient(to bottom right, red, white, blue);
+ }
+ #toCorner5 {
+ background: linear-gradient(to bottom left, red, white, blue);
+ -pie-background: linear-gradient(to bottom left, red, white, blue);
+ }
+ #toCorner6 {
+ background: linear-gradient(to top left, red, white, blue);
+ -pie-background: linear-gradient(to top left, red, white, blue);
+ }
#multi1 {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), color-stop(0.2, blue), to(#0f0));
background: -moz-linear-gradient(top, yellow, blue 20%, #0f0);
- -pie-background: linear-gradient(top, yellow, blue 20%, #0f0);
+ background: linear-gradient(to bottom, yellow, blue 20%, #0f0);
+ -pie-background: linear-gradient(to bottom, yellow, blue 20%, #0f0);
}
#multi2 {
background: -webkit-gradient(linear, left top, right top, from(yellow), color-stop(0.2, blue), to(#0f0));
background: -moz-linear-gradient(left, yellow, blue 20%, #0f0);
- -pie-background: linear-gradient(left, yellow, blue 20%, #0f0);
+ background: linear-gradient(to right, yellow, blue 20%, #0f0);
+ -pie-background: linear-gradient(to right, yellow, blue 20%, #0f0);
}
#multi3 {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, yellow), color-stop(0.5, blue), color-stop(0.7, green));
background: -moz-linear-gradient(top, yellow 30%, blue 50%, green 70%);
- -pie-background: linear-gradient(top, yellow 30%, blue 50%, green 70%);
+ background: linear-gradient(to bottom, yellow 30%, blue 50%, green 70%);
+ -pie-background: linear-gradient(to bottom, yellow 30%, blue 50%, green 70%);
}
#multi4 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.5, yellow), color-stop(0.75, blue), to(green));
background: -moz-linear-gradient(left, yellow 50%, blue, green);
- -pie-background: linear-gradient(left, yellow 50%, blue, green);
+ background: linear-gradient(to right, yellow 50%, blue, green);
+ -pie-background: linear-gradient(to right, yellow 50%, blue, green);
}
#multi5 {
background: -webkit-gradient(linear, left top, right top, from(aqua), color-stop(.0667, black), color-stop(.1333, blue), color-stop(.2, fuchsia), color-stop(.2667, gray), color-stop(.3333, green), color-stop(.4, lime), color-stop(.4667, maroon), color-stop(.5333, navy), color-stop(.6, olive), color-stop(.6667, purple), color-stop(.7333, red), color-stop(.8, silver), color-stop(.8667, teal), color-stop(.9333, white), to(yellow));
background: -moz-linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
- -pie-background: linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
+ background: linear-gradient(to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
+ -pie-background: linear-gradient(to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );
}
#multi6 {
background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(0.333, yellow), color-stop(.667, green), to(blue));
background: -moz-linear-gradient(45deg, red, yellow, green, blue);
+ background: linear-gradient(45deg, red, yellow, green, blue);
-pie-background: linear-gradient(45deg, red, yellow, green, blue);
}
@@ -177,7 +216,8 @@
margin-right: 0;
border-radius: 0;
background: -moz-linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
- -pie-background: linear-gradient(center bottom,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
+ background: linear-gradient(to top,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
+ -pie-background: linear-gradient(to top,rgb(170,222,249) 0%,rgb(63,158,210) 100%);
}
#lineup2 {
margin-left: 0;
@@ -190,30 +230,30 @@
#opacity1 {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
- background: -ms-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
background: -o-linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
- -pie-background: linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
+ background: linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
+ -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2));
}
#opacity1:hover {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
- background: -ms-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
- -pie-background: linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
+ background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
+ -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.8));
}
#opacity2 {
background: -webkit-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -moz-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
- background: -ms-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -o-linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
- -pie-background: linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
+ background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
+ -pie-background: linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
}
#opacity2:hover {
background: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -moz-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
- background: -ms-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
background: -o-linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
- -pie-background: linear-gradient(left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
+ background: linear-gradient(to right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
+ -pie-background: linear-gradient(to right, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1));
}
@@ -223,43 +263,51 @@
<div class="section" id="vertTests">
<h1>Basic vertical linear gradient</h1>
- <p id="vert1">linear-gradient( top, yellow, blue);</p>
- <p id="vert2">linear-gradient( bottom, blue, yellow);</p>
- <p id="vert3">linear-gradient( -90deg, yellow, blue);</p>
- <p id="vert4">linear-gradient( 270deg, yellow, blue);</p>
- <p id="vert5">linear-gradient( top, yellow 0%, blue 100%);</p>
- <p id="vert6">linear-gradient( center top, yellow, blue);</p>
- <p id="vert7">linear-gradient( yellow, blue);</p>
+ <p id="vert1">linear-gradient( to bottom, yellow, blue);</p>
+ <p id="vert2">linear-gradient( to top, blue, yellow);</p>
+ <p id="vert3">linear-gradient( 180deg, yellow, blue);</p>
+ <p id="vert4">linear-gradient( -180deg, yellow, blue);</p>
+ <p id="vert5">linear-gradient( to bottom, yellow 0%, blue 100%);</p>
+ <p id="vert6">linear-gradient( yellow, blue);</p>
</div>
<div class="section" id="horizTests">
<h1>Basic horizontal linear gradient</h1>
- <p id="horiz1">linear-gradient( left, yellow, blue);</p>
- <p id="horiz2">linear-gradient( right, blue, yellow);</p>
- <p id="horiz3">linear-gradient( 0, yellow, blue);</p>
- <p id="horiz4">linear-gradient( 360deg, yellow, blue);</p>
- <p id="horiz5">linear-gradient( left, yellow 0%, blue 100%);</p>
- <p id="horiz6">linear-gradient( left center, yellow, blue);</p>
+ <p id="horiz1">linear-gradient( to right, yellow, blue);</p>
+ <p id="horiz2">linear-gradient( to left, blue, yellow);</p>
+ <p id="horiz3">linear-gradient( 90deg, yellow, blue);</p>
+ <p id="horiz4">linear-gradient( 450deg, yellow, blue);</p>
+ <p id="horiz5">linear-gradient( to right, yellow 0%, blue 100%);</p>
</div>
<div class="section" id="diagTests">
<h1>Basic diagonal linear gradient</h1>
- <p id="diag1">linear-gradient(top left, yellow, blue);</p>
- <p id="diag2">linear-gradient(0 0, yellow, blue);</p>
- <p id="diag3">linear-gradient(top 0px left 0px, yellow, blue);</p>
- <p id="diag4">linear-gradient(bottom right, blue, yellow);</p>
- <p id="diag5">linear-gradient(-45deg, yellow, blue);</p>
- <p id="diag6">linear-gradient(315deg, yellow, blue);</p>
+ <p id="diag1">linear-gradient( to bottom right, yellow, blue);</p>
+ <p id="diag2">linear-gradient( to right bottom, yellow, blue);</p>
+ <p id="diag3">linear-gradient( to top left, blue, yellow);</p>
+ <p id="diag4">linear-gradient( to left top, blue, yellow);</p>
+ <p id="diag5">linear-gradient( 135deg, yellow, blue);</p>
+ <p id="diag6">linear-gradient( 495deg, yellow, blue);</p>
+ </div>
+
+ <div class="section" id="toCornerTests">
+ <h1>To-corner linear gradient angles</h1>
+ <p id="toCorner1"></p>
+ <p id="toCorner2"></p>
+ <p id="toCorner3"></p>
+ <p id="toCorner4"></p>
+ <p id="toCorner5"></p>
+ <p id="toCorner6"></p>
</div>
<div class="section" id="multiStopTests">
<h1>Multiple color stops along linear gradient</h1>
- <p id="multi1">linear-gradient(top, yellow, blue 20%, #0f0)</p>
- <p id="multi2">linear-gradient(left, yellow, blue 20%, #0f0)</p>
- <p id="multi3">linear-gradient(top, yellow 30%, blue 50%, green 70%)</p>
- <p id="multi4">linear-gradient(left, yellow 50%, blue, green)</p>
- <p id="multi5">linear-gradient(left, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );</p>
- <p id="multi6">linear-gradient(45deg, red, yellow, green, blue);</p>
+ <p id="multi1">linear-gradient( to bottom, yellow, blue 20%, #0f0)</p>
+ <p id="multi2">linear-gradient( to right, yellow, blue 20%, #0f0)</p>
+ <p id="multi3">linear-gradient( to bottom, yellow 30%, blue 50%, green 70%)</p>
+ <p id="multi4">linear-gradient( to right, yellow 50%, blue, green)</p>
+ <p id="multi5">linear-gradient( to right, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow );</p>
+ <p id="multi6">linear-gradient( 45deg, red, yellow, green, blue);</p>
</div>
<div class="section" id="lineup">
@@ -270,8 +318,8 @@
<div class="section" id="opacity">
<h1>Color-stop opacity</h1>
- <p id="opacity1">linear-gradient(top, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2))</p>
- <p id="opacity2">linear-gradient(top, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1))</p>
+ <p id="opacity1">linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.2))</p>
+ <p id="opacity2">linear-gradient(to bottom, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 1))</p>
</div>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.