W3C home > Mailing lists > Public > www-style@w3.org > February 2012

RE: [CSS3-images] premultiplied alpha (was rotate(<angle>[, <translation-value>, <translation-value>]))

From: Brian Manthos <brianman@microsoft.com>
Date: Tue, 21 Feb 2012 22:29:12 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, Rik Cabanier <cabanier@gmail.com>
CC: www-style list <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D170EC5B906@TK5EX14MBXC266.redmond.corp.microsoft.com>
Tab:
> Brian: Your examples won't work.  Note that "rgba(100%,0,0,.001)"
> turns into "pre-rgba(.1%, 0, 0, .001)", which is almost indistinguishable from "pre-rgba(0,0,0,0)", so you'd get basically identical color ramps.  You need to space out the extra stops so you actually approximate a curve through the space.


I didn't say it was a great approximation, just an approximation.

Yes, you need to add more points if you want the desired curvature to be simulated decently.

That said, even 2 additional points looks decent IMO.




<!doctype html>

    <meta http-equiv="X-UA-Compatible" content="IE=10">
<style type="text/css">
html {
	background-color: white;
}
div {
	border: 1px solid red;
	display: inline-block;
	width: 50px;
	height: 200px;
	margin: 10px;
}
.a {
	background-image: -moz-linear-gradient(yellow, transparent);
	background-image: -ms-linear-gradient(yellow, transparent);
	background-image: -o-linear-gradient(yellow, transparent);
	background-image: -webkit-linear-gradient(yellow, transparent);
}
.b {
	background-image: -moz-linear-gradient(yellow, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -ms-linear-gradient(yellow, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -o-linear-gradient(yellow, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -webkit-linear-gradient(yellow, rgba(255,25,0,0.1) 90%, transparent);
}
.c {
	background-image: -moz-linear-gradient(yellow, rgba(255,128,0,0.5) 50%, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -ms-linear-gradient(yellow, rgba(255,128,0,0.5) 50%, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -o-linear-gradient(yellow, rgba(255,128,0,0.5) 50%, rgba(255,25,0,0.1) 90%, transparent);
	background-image: -webkit-linear-gradient(yellow, rgba(255,128,0,0.5) 50%, rgba(255,25,0,0.1) 90%, transparent);
}
</style>

<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
Received on Tuesday, 21 February 2012 22:30:05 GMT

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