Re: [jQuery] Plugin idea: Gradient Fill
Hi, > > Not seen a plugin that does this yet. Would try it myself, but not > > sure how to do so (even after looking at existing implementations). > > http://www.designdetector.com/demos/css-gradients-demo-1.php > > The basic implementation of that page similar to the rounded corner plugin > I did. It's much worse from a performance standpoint though, because you > have to fill the entire element area with small slices (generally 1 pixel > wide/high). For corners you only have to overlay the top and bottom edges. > > In the IE case you can dispense with that entirely and use the builtin > gradient filter, which has got to be a lot faster: > http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/r >e ference/filters/gradient.asp Maybe you could use a canvas in browsers that support it. If that is not available, a dynamically generated data-URL for the background-image can do the trick. Multiple slices are only needed as a fallback for even less capable Browsers. Most widely used current Browsers would all have at least one of the better solutions: - IE: gradient Filter - Firefox >= 1.5: Canvas - Safari: Canvas - Firefox < 1.5: data-URLs - Opera: data-URLs - Konqueror: data-URLs Christof ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin idea: Gradient Fill
> Not seen a plugin that does this yet. Would try it myself, but not > sure how to do so (even after looking at existing implementations). > http://www.designdetector.com/demos/css-gradients-demo-1.php The basic implementation of that page similar to the rounded corner plugin I did. It's much worse from a performance standpoint though, because you have to fill the entire element area with small slices (generally 1 pixel wide/high). For corners you only have to overlay the top and bottom edges. In the IE case you can dispense with that entirely and use the builtin gradient filter, which has got to be a lot faster: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/re ference/filters/gradient.asp If anyone asks for a radial gradient, punch them. :) ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin idea: Gradient Fill
Aye, it would! It might be hard to show new users though, so text could be:
"top left", "top centre", "top right",
"middle left", "middle centre", "middle right",
"bottom left", "bottom centre", "bottom right"
So calling would be something like:
$("div#mydiv").GradientFill(
$("div#mydiv"), //Background div/colour
"#32A", //Final colour
1, //Start point (1 is top left)
6, //End point (6 is middle right)
);
--
View this message in context:
http://www.nabble.com/Plugin-idea%3A-Gradient-Fill-tf2072481.html#a5707462
Sent from the JQuery forum at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Plugin idea: Gradient Fill
Might even be easier to assume a 3x3 grid then have a start point and an end point. 1 to 9 would be a diagonal gradient from top left to bottom right, etc. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Dan Atkinson Sent: Tuesday, August 08, 2006 9:04 AM To: discuss@jquery.com Subject: Re: [jQuery] Plugin idea: Gradient Fill Sounds like a cool idea, Sam. You should probably have start as well. So, all told, all direction and position options would be: Directions: Horizontal (L to R) and (R to L) Vertical (T to B) and (B to T) Position: Any of nine points in the element 1 2 3 4 5 6 7 8 9 -- View this message in context: http://www.nabble.com/Plugin-idea%3A-Gradient-Fill-tf2072481.html#a5707117 Sent from the JQuery forum at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin idea: Gradient Fill
Sounds like a cool idea, Sam. You should probably have start as well. So, all told, all direction and position options would be: Directions: Horizontal (L to R) and (R to L) Vertical (T to B) and (B to T) Position: Any of nine points in the element 1 2 3 4 5 6 7 8 9 -- View this message in context: http://www.nabble.com/Plugin-idea%3A-Gradient-Fill-tf2072481.html#a5707117 Sent from the JQuery forum at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Plugin idea: Gradient Fill
You'd also need to include directionality.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Sam Collett
Sent: Tuesday, August 08, 2006 7:55 AM
To: jQuery Discussion.
Subject: [jQuery] Plugin idea: Gradient Fill
Not seen a plugin that does this yet. Would try it myself, but not
sure how to do so (even after looking at existing implementations).
Anyone up for a challenge?
Syntax could be something like this
$("#mydiv").gradientFill(
{
from: "background",
to: "#fff",
direction: "vertical"
}
)
Would go from the background colour of #mydiv to white, in a vertical
direction. Or you could specify a different start colour and
direction:
$("#mydiv").gradientFill(
{
from: "#000",
to: "#fff",
direction: "horizontal"
}
)
Something like this:
http://www.designdetector.com/demos/css-gradients-demo-1.php , but the
markup would be generated dynamically.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
