RE: [css3-images] Gradient Magic

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:02 UTC

I revisited Behnam's rendering and still believe it aligns with the angular specification directly.  You're right thought that you have to use a different rectangle for than the original box.

I happened to be making a sample page to demonstrate when I saw Brad's mail come in.  His approach sounds similar to what I ended up with.

In case it's useful for the discussion, here's (attached and pasted below) what I came up with.

I think with liberal calc() usage (but perhaps a CSS.next version of calc), you might be able express the equations noted in my css comments.

Cheers,
-Brian

<!doctype html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=10">
	<style>
	div {
		background-image: -moz-linear-gradient(right bottom, red, white, blue);
		background-image: -ms-linear-gradient(right bottom, red, white, blue);
		background-image: -o-linear-gradient(right bottom, red, white, blue);
		background-image: -webkit-linear-gradient(right bottom, red, white, blue);
		background-image: linear-gradient(right bottom, red, white, blue);
		color: aqua;
		display: inline-block;
		font-size: 14pt;
		height: 85px;
		outline: 1px solid black;
		margin: 5px;
		width: 640px;
		vertical-align: top;
	}
	div:nth-child(2) {
		background-image: -moz-linear-gradient(-1.438756565rad, blue, white, red);
		background-image: -ms-linear-gradient(-1.438756565rad, blue, white, red);
		background-image: -o-linear-gradient(-1.438756565rad, blue, white, red);
		background-image: -webkit-linear-gradient(-1.438756565rad, blue, white, red);
		background-image: linear-gradient(-1.438756565rad, blue, white, red);
	}
	div:nth-child(4) {
		height: 345px;
		width: 190px;
	}
	div:nth-child(5) {
		background-image: -moz-linear-gradient(-0.503399384rad, blue, white, red);
		background-image: -ms-linear-gradient(-0.503399384rad, blue, white, red);
		background-image: -o-linear-gradient(-0.503399384rad, blue, white, red);
		background-image: -webkit-linear-gradient(-0.503399384rad, blue, white, red);
		background-image: linear-gradient(-0.503399384rad, blue, white, red);
		height: 345px;
		width: 190px;
	}
	div:nth-child(6) {
		height: 345px;
		width: 626.44px;  /* 345px * (345px / 190px) */
	}
	div:nth-child(7) {
		height: 345px;
		width: 190px;
		background-position: center;
		background-size: 626.44px 345px;
	}
	div:nth-child(8) {
		height: 345px;
		width: 190px;
		/* box diagonal = sqrt(345^2 + 190^2) = 393.86px */
		background-position: center;
		background-size: 626.44px 345px;
		/* positioning diag = 715.16px */
		/* red offset = ((715.16 - 393.86)/2) * (715.16 / 626.44) = 183.40px */
		/* blue offset = (715.16 - 183.40) = 531.76 */
		background-image: -moz-linear-gradient(right bottom, red 183.40px, white, blue 531.76px);
		background-image: -ms-linear-gradient(right bottom, red 183.40px, white, blue 531.76px);
		background-image: -o-linear-gradient(right bottom, red 183.40px, white, blue 531.76px);
		background-image: -webkit-linear-gradient(right bottom, red 183.40px, white, blue 531.76px);
		background-image: linear-gradient(right bottom, red 183.40px, white, blue 531.76px);
	}
	</style>
</head>
<body>
<div>CSS3 Linear Gradient: right bottom (spec)</div>
<div>CSS3 Linear Gradient: right bottom (angle)</div>
<hr/>
<div>CSS3 Linear Gradient: right bottom (spec)</div>
<div>CSS3 Linear Gradient: right bottom (angle)</div>
<div>CSS3 Linear Gradient: right bottom (RRR)</div>
<div>CSS3 Linear Gradient: right bottom (RRR, centered)</div>
<div>CSS3 Linear Gradient: right bottom (RRR, centered, stops adjust)</div>
<hr/>
RRR = Reverse Ratio Rect
</html>