One of the idea I came up is to create a CGPath and stroke it with gradient every time when drawMapRect method been called, since the MKPolylineView is replaced by MKPlolylineRenderer in ios7. I tried to implement this by subclassing a MKOverlayPathRenderer but I failed to pick out individual CGPath, then I find a mysterious … Read more
You can do it using CSS but it will only work in webkit browsers (Chrome and Safari): p { background: linear-gradient(red, blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah … Read more
Mike Bostock figured out a way, though it’s not easy: https://bl.ocks.org/mbostock/4163057 Basically, this technique uses getPointAtLength to slice the stroke into many short strokes, specify interpolated color stops for each, and then apply a gradient to each short stroke between those stops. Good luck if you’re up to the challenge 😉 Edit (July 3rd, 2019): … Read more
I have also been working with this problem. Another “solution” is to add a div around the item that has the gradient and rounded corners. Make that div the same height, width, and rounded corner values. Set the overflow to hidden. This is basically just a mask, but it works for me. HTML: <div class=”mask … Read more
You can override the paintComponent method of the JButton instance and paint its Graphics object with one of the following classes that implement the Paint interface: GradientPaint. LinearGradientPaint MultipleGradientPaint RadialGradientPaint import java.awt.Color; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.GradientPaint; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Point; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.SwingUtilities; public final class JGradientButtonDemo { … Read more
…10 years later… CSS now supports conical gradients, although browser support is mixed at the time of writing this. You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect. https://codepen.io/eastonium/pen/abOpdEm
I know you won’t like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image. If it’s a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the … Read more
A Demo: http://jsfiddle.net/m1erickson/4fX5D/ It’s fairly easy to create a gradient that changes along the path: It’s more difficult to create a gradient that changes across the path: To create a gradient across the path you draw many gradient lines tangent to the path: If you draw enough tangent lines then the eye sees the curve … Read more
This approach won’t work. SVG doesn’t have conical gradients. To simulate the effect, you would have to fake it with a large number of small line segments. Or some similar technique. Update: Here is an example. I approximate the 360deg of hue with six paths. Each path contains an arc which covers 60deg of the … Read more
This can be achieved using linear-gradient. Setting multiple colors to the gradient can be done by assigning multiple color stops and the blocky effect can be achieved by making the next color start at the exact same place where the current color ends (that is, same stop percentage for the current color’s end position and … Read more