RE: [css3-images] Gradient Magic

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>

Attachments

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