W3C home > Mailing lists > Public > www-style@w3.org > July 2011

RE: [css3-images] Gradient Magic

From: Brian Manthos <brianman@microsoft.com>
Date: Mon, 18 Jul 2011 22:27:34 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, Brad Kemper <brad.kemper@gmail.com>
CC: Behnam Esfahbod ZWNJ <behnam@zwnj.org>, WWW-Style <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D170866FB@TK5EX14MBXC266.redmond.corp.microsoft.com>
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>

Received on Monday, 18 July 2011 22:28:06 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:42 GMT