- 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>
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 UTC