gradient
SVG: why does external css override inline style for text?
Because in SVG, like HTML before it, styles trump attribute styling. fill=”red” below is NOT an “inline style”, style=”fill:green” IS an inline style. <svg width=”400″ height=”400″> <text x=”50″ y=”50″ fill=”red” style=”fill:green”>This will be green</text> </svg> Like wise, if you have a style defined outside, it will win. <style> text { fill: lime; } </style> <svg … Read more
Generating gradients programmatically?
you want an interpolation between the first and the second colour. Interpolating colours is easy by calculating the same interpolation for each of its components (R, G, B). There are many ways to interpolate. The easiest is to use linear interpolation: just take percentage p of the first colour and percentage 1 – p of … Read more
Can you create gradients that fade to opacity using CSS or JavaScript?
Yes for the colors, use rgba(x, y, z, o) where o is the opacity should work e.g. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); Edit: For the final value (opacity) 1 is opaque & 0 is transparent
SVG angular gradient
…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.
How to do gradient borders in CSS
The border-image property can accomplish this. You’ll need to specify border-style and border-width too. border-image: linear-gradient(#f6b73c, #4d9f0c) 30; border-width: 4px; border-style: solid; Read more on MDN.
White to transparent gradient with background image
I recommend Ultimate CSS Gradient Generator – ColorZilla.com It’s a well designed tool and there’s a white to transparent preset. The CSS code that it generates for a white to transparent gradient is this: background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) … Read more
Applying a Gradient to CAShapeLayer
You could use the path of your shape to create a masking layer and apply that on the gradient layer, like this: UIView *v = [[UIView alloc] initWithFrame:self.window.frame]; CAShapeLayer *gradientMask = [CAShapeLayer layer]; gradientMask.fillColor = [[UIColor clearColor] CGColor]; gradientMask.strokeColor = [[UIColor blackColor] CGColor]; gradientMask.lineWidth = 4; gradientMask.frame = CGRectMake(0, 0, v.bounds.size.width, v.bounds.size.height); CGMutablePathRef t = … Read more
How do I add a gradient to the text of a UILabel, but not the background?
I was looking for a solution and DotSlashSlash has the answer hidden in one of the comments! For the sake of completeness, the answer and the simplest solution is: UIImage *myGradient = [UIImage imageNamed:@”textGradient.png”]; myLabel.textColor = [UIColor colorWithPatternImage:myGradient];
Gradient that stops at a particular height and continues further with a solid color
background-color: #eee; background-image: linear-gradient(top, #fff 0%, #eee 300px); /* W3C */ background-image: -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */ This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient. I’ve confirmed that it works in Firefox 3.6 and Chrome 15.