Color Gradient Algorithm in Lab color space
java,algorithm,colors,gradient,matching
To generate a gradient between two color values, you can just linearly interpolate between them. This will basically work in any color space, although if the transformation between two color spaces is not linear, the gradient obtained by linearly interpolating in one space will not be linear in the other....
converting gradient to linear-gradient syntax
css,css3,gradient,linear-gradients
left top, right top should map to a single direction parameter: to right. The top bit is insignificant since this is a horizontal linear gradient. The from, to and color-stop functional notations are not used; instead the color stops are specified in order. Based on what you have, it...
How to make gradient color filled timeseries plot in R
And here's an approach in base R, where we fill the entire plot area with rectangles of graduated colour, and subsequently fill the inverse of the area of interest with white. shade <- function(x, y, col, n=500, xlab='x', ylab='y', ...) { # x, y: the x and y coordinates #...
ChartJS Doughnut Charts Gradient Fill
javascript,canvas,gradient,chartjs
ChartJS will not (properly) use gradient fill colors when drawing a linear gradient on non-linear paths like your donut chart. A linear gradient does not curve. Possibility #1 -- use a radial gradient You might experiment with a radial gradient and see if the results meets your design needs. Possibility...
Gradient four figures scale
After you normalize the data the gradient is already adjusted from 0 to 1 to separate the imshow graphs simply add subplots to the figures: plt.subplot(number of rows, number of columns, graph number) import matplotlib.pyplot as plt import numpy as np zvals = np.loadtxt("sharedGradient.txt") zvals = zvals/200 plt.subplot(2,2,1) img =...
CSS gradient on border
html,css,background,border,gradient
That is because the background will extend to the border edge by default. You can avoid this by using the background-clip property, by setting background-clip: padding-box;. Working Example: input { background: transparent; font-family:'Open Sans'; border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; padding: 5px; color: rgb(164, 164, 164); }...
CSS gradient + noise as div background filling
body { padding:0; margin: 0; background-image:...
animating one color of a gradient continuously with css
css,css-transitions,gradient,animated
You might not be able to animate gradient colors, but you can animate the background color. So, in your case, have an unchanging linear gradient going from black to transparent. Then change the background color using CSS transitions. Here's a working example: http://jsfiddle.net/qSJa8/ I had to include javascript to switch...
jquery's .css() and gradients
You aren't calling changeGradient anywhere. I suggest adding a button that will take the output of both inputs when clicked to change the background. Like this https://jsfiddle.net/jyh18cnk/1/ Or, if you don't want the button, you could make the variables for colors global Like this https://jsfiddle.net/ao0escev/1/...
White lines in gradient.rect from R's plotrix package
I was able to reproduce the problem (although not that image) with this code: png();plot(x=seq(as.Date("1979-05-04"),as.Date("1990-11-28"),length=50), 1:50,type="n",axes=FALSE) # set up plot coords correctly plotrix::gradient.rect(as.Date("1979-05-04"),5, as.Date("1990-11-28"),6, col=plotrix::smoothColors("royalblue", 100.0,"white"), border=NA,gradient="x",nslices=121); dev.off() Then I saw three thin, white vertical bands. I looked at the RGB values and plotted their hexadecimal equivalents: plot(NA, xlim=c(1,110),ylim=c(0x4169E1, 0xFFFFFF)...
how to make bottom border gradient? [closed]
you could use a pseudo element for this, allowing higher browser support than a border-image.. html, body { margin: 0; padding: 0; background: #222; } hr { position: relative; height: 0; border: 0; } hr:before { content: ""; position: absolute; top: 100%; left: 0; height: 5px; width: 100%; } .demo1:before...
Image Gradient Vector Field in Python
python,image,image-processing,numpy,gradient
I think your strange results are, at least in part, because p is of type uint8. Even numpy diff results in clearly incorrect values for an array of this dtype. If you convert to signed integer by replacing the definition of p with the following: p = np.asarray(I).astype(int8) then the...
c# XAML ProgressBar set gradient filling properly
My Solution: After trying a couple of ways (drawing a rectangle with default color onto the bar etc) I figured out that I can modify the offset of GradientStop by code: color_UL.Offset = 2.0 - ul_val / 100; means I subtract the percentage that I want to display e.g. 30%...
Dynamic multi-color gradient image
You found the problem yourself already, actually.. So let's work further on that: You can see that the gradient effect is lost, because the static 255 is replaced with dynamic value which is creating negative numbers and thus losing its effect. So, instead of decreasing with $i each time, you...
html5 canvas gradient in 4 corners
javascript,html5,canvas,gradient
There is no direct operation for something like this. In certain special cases (ie. colorpicker) you can get away with two separate gradients. If you want arbitrary color per corner, you will have to perform it pixel-wise. In other words do linear interpolation on both x and y for each...
Radial Gradient Clippath
No, you have to use a <mask> if you want gradients, <clipPath> only considers the geometry of the shapes inside.
fine-grained colour gradient legend
It seems you are plotting your data rather than making a legend. Anyway.. The problem is the mismatch between your data range and maxColorValue. So, you can set the max... red <- prob[order(prob)] green <- max(prob)-prob[order(prob)] my.palette <- rev(rgb(red, green, 0, maxColorValue=max(prob))) image(1, prob[order(prob)], t(seq_along(prob)), col=my.palette, axes=FALSE, main="probability") axis(2) ..or...
CAGradientLayer with 4 Colors in 4 Different Corners
ios,swift,gradient,cagradientlayer
Thanks for @Martin R's suggestions, here is some code that creates a blend that seems to work pretty well. Since there are so many colors it gets pretty dark in the middle, but in the end gets the desired effect: let gradientColors: Array <AnyObject> = [topColor1.CGColor, UIColor.clearColor().CGColor] let gradientLocations: Array...
CSS Multiple background with multiple classes
css,css3,inheritance,background,gradient
Simply put, there is no 'easier way' inherit works by taking the parent property The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property. The only way to apply multiple...
Assistance with Gradient Background
css,css3,gradient,linear-gradients
Actually, it would look like this: html { height: 100%; } body { background: linear-gradient(red, orange, gold) no-repeat, gold; background-size: 100%; margin: 0px; } div { min-height: 200vh; } Here is a fiddle https://jsfiddle.net/v14m59pq/163/...
GradientPaint Working Strangely
So, based on the JavaDocs GradientPaint public GradientPaint(float x1, float y1, Color color1, float x2, float y2, Color color2) Constructs a simple acyclic GradientPaint object. Parameters: x1 - x coordinate of the first specified Point in user space y1 - y coordinate of the first specified Point in user space...
CSS - gradient “border” using classes
You could use box-shadow to create a similar effect <div class="shadow"> test </div> div .shadow{ box-shadow: 0px 0px 10px 5px rgb(85, 85, 85); } A few modifications should get you exactly what you want....
GradientColor of Drawable not changing at startup
try this: final ShapeDrawable mDrawable = new ShapeDrawable(new RectShape()); ShapeDrawable.ShaderFactory shaderFactory = new ShapeDrawable.ShaderFactory() { @Override public Shader resize(int width, int height) { Log.d(TAG, "resize >>> " + width + " x " + height + " <<<"); return new LinearGradient(0, 0, 0, height, Color.RED, Color.GREEN, Shader.TileMode.CLAMP); } }; mDrawable.setShaderFactory(shaderFactory);...
implimenting jquery fancybox over animated gradient background
jquery,css,fancybox,gradient,animated
Just apply CSS position and z-index to your elements like : .fancybox { ... position: relative; z-index: 100; } #titles { ... position: relative; z-index: 100; } #gradient { ... position: relative; z-index: 10; /* lower for the gradient background */ } ...
How to get color from a gradient
You can interpolate the color yourself: Color imageColor = Color.GREEN.interpolate(Color.RED, value / 100.0); ...
plot gradient colours of stack without ggplot2
This is a little bit fiddly, but I usually generate n (e.g. 1000) colours with each of two complementary colourRampPalettes (e.g. one made of reds/yellows and one of blues). Afterwards, if the colour key does not have even length either side of zero, I subset the colour vector corresponding to...
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 {...
How to not repeat a CSS background gradient
css,background,gradient,linear-gradients
You can use the background-repeat CSS property: background-repeat: no-repeat; Edit: There is a more complete/helpful answer here that provides a couple of different solutions....
How to get a gradient background for table rows with JSF and CSS?
css,jsf,table,background,gradient
This is how I did it: I updated the dataTable like this: <h:dataTable id="persons" value="#{tableBean.persons}" var="person" rowClasses="#{tableBean.calculatedRowClasses}"> So, with a bean: rowClasses="#{tableBean.calculatedRowClasses}" Then I calculate the necessary CSS elements to add in a long string: public String getCalculatedRowClasses() { StringBuilder build = new StringBuilder(); int total = persons.size(); int factor...
Setting a radial gradient as the background color of a circle on canvas
android,canvas,gradient,circle,android-drawable
before drawing the circle, use the following code : paint.setShader(new RadialGradient( centerX, centerY, radius, centerColor, externalColor, Shader.TileMode.CLAMP )); canvas.drawCircle(..., paint); See the RadialGradient if you want to have a more custom radial gradient....
Randomly generated CGGradient wont display
ios,swift,core-graphics,gradient
@IBDesignable class Gradient_Viewer: UIView { var random8bit: CGFloat { return CGFloat(arc4random_uniform(256))/255.0 } var gradient: CGGradientRef { return CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [UIColor(red: random8bit, green: random8bit, blue: random8bit, alpha: 1.0).CGColor, UIColor(red: random8bit, green: random8bit, blue: random8bit, alpha: 1.0).CGColor], [0, 1.0]) } override func drawRect(rect: CGRect) { CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), gradient, CGPoint.zeroPoint, CGPoint(x: 0, y:...
Setting % of a background color programmatically
android,view,gradient,background-color
It's totally possible, few ways to do it, but I would recommend using custom Drawable, for example: public class PercentDrawable extends Drawable { private final int percent; private final Paint paint; public PercentDrawable(int percent) { super(); this.percent = percent; this.paint = new Paint(Paint.ANTI_ALIAS_FLAG); this.paint.setColor(0xffff0000); } @Override public void draw(Canvas canvas)...
R, using quadplot, generating color gradient for data points, based on 5th column of values
Is this what you want ? # Create custom color palette (blue to red gradient) grad <- colorRampPalette(c("blue","red")) # Get a vector of colors and deal with negative values in column "e" colors <- grad(length(min(f[,5]):max(f[,5]))) index <- f[,5] + abs(min(f[,5])) # Plot using quadplot quadplot(f[,-5], labelcol=1, labelpch=1:4, col=colors[index], pch=19) #...
Multiple CSS background gradients
you can just add them seperated with a comma: body { background: linear-gradient(transparent 50%, rgba(0, 0, 0, .1) 50%), linear-gradient(135deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%); } ...
Calculating gradient with prewitt operator [duplicate]
Gradient calculations on images are performed using a mathematical operation called convolution. The formula for convolution of two matrices f and g is given below. In pseudocode, the algorithm would be: let f be the prewitt (convolution) operator let g be the image let h be the convolution result for...
How can i change the degree at which the gradient starts
ios,objective-c,gradient,layer,angle
Here is some code I've patched into the angleGradient(...) function in AngleGradientLayer.m. float offset = M_PI / 4; float angle = atan2f(dirY, dirX) + offset; while (angle < 0) angle += 2 * M_PI; while (angle > 2 * M_PI) angle -= 2 * M_PI; while (angle < 0) angle...
Gradine that doesn't take entire height of generated image
Just use a color stop as follows~: div { border:1px solid red; width: 200px; height: 100px ; background-image: linear-gradient(to bottom, transparent, transparent 90%, blue 90%, blue) } <div></div> ...
How to blend CGGradients together in PageViewController?
ios,objective-c,gradient,uipageviewcontroller
The problem is that with a UIPageViewController you are not in charge of the views and (even more important) you don't get to customize the transition animation, so you can't add anything at the join. Since you only have four views, I would suggest you abandon UIPageViewController entirely and use...
Continuous varying color in three adjacent rectangles
android,opengl-es-2.0,gradient
The interpolation you see by using varying color in the fragment shader is a linear interpolation of color components as such: R = R1 + (R2-R1)*scale G = G1 + (G2-G1)*scale B = B1 + (B2-B1)*scale A = A1 + (A2-A1)*scale In your case C1(0,0,1,1) and C2(1,0,0,1) is interpolated. The...
Sunburst effect with css3 gradient
You could use :before and :after :pseudo-elements to get this effect. html, body { width: 100%; height: 100%; margin: 0; } #grad { position: relative; width: 100%; height: 100%; } #grad:after, #grad:before { content: ''; position: absolute; background: linear-gradient(90deg, transparent 50%, black 50%, black), linear-gradient(82deg, transparent 50%, #12E0DB 50%, #12E0DB),...
How can I make an effect of fading shadow with css3?
Use something like this Which uses something like: .knockout-top-to-bottom { position: relative; } .knockout-top-to-bottom:before, .knockout-top-to-bottom:after { content: ""; position: absolute; } .knockout-top-to-bottom:before { top: -3px; left: -3px; bottom: 0; right: -3px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent);...
CSS Radial Gradient?
You would want something like this: background: radial-gradient(ellipse at center, #50779d 0%,#50779d 37%,#557fa6 47%,#557ea5 51%,#50779d 59%,#50789d 100%); Demo Further Reading...
Generation of edge stop parameter according to self-snake model in MATLAB
image,matlab,image-processing,gradient,edge-detection
From your comments, you said you want to find the gradient of the overall image. I'm assuming you mean to compute one magnitude value for the entire image. One way to do it is perhaps to find the average magnitude value. That can be done by simply finding the overall...
Defining a background for at title that spans across the top of a padded div (like a TH in a table)?
Here's another solution using negative margins: http://jsfiddle.net/WV5Hb/3/. Essentially, the top, right, and left margins have the same negative values as the padding of the container. To make sure that the padding is consistent throughout, I first applied a mini-reset. HTML: <div class = "container"> <h1>Title of Div</h1> <p>Sample Content</p> <p>Sample...
How to create gradient overlay over Android Video Player and fade away
android,gradient,android-video-player,android-videoview,android-overlay
Sure. Here's the XML snippet for the overlay . . . </RelativeLayout> </ScrollView> <View android:id="@+id/overlay" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/loading_overlay" android:visibility="gone" /> </LinearLayout> I put the 'overlay' at the end of the entire layout so it is on top. I set it initially to "gone" so it doesn't show up. Then in...
Unexpected NSTextField background color, should be transparent
cocoa,swift,gradient,nswindow,nstextfield
You always draw the gradient in the dirty rect. When the text changes, that rect is only the size of the textfield, not of the whole view. Your drawRect function then draws the full gradient in the textfield's background rect, rather than just the portion of the background-view-wide gradient you'd...
safari and firefox vs chrome - css gradients
The short answer is that you don't. The long answer is that there is no specific method mandated for how they are supposed to get from your starting gradient values to your end values. Hardware acceleration would pass this over to the rendering engine of any graphics card, but how...
How can I create a custom gradient in android?
int startColor=Color.parseColor("#a6c1de"); //you can add as many gradient colors as you want here //and include it in the int array while initializing GradientDrawable int endColor=Color.parseColor("#aa82b7"); GradientDrawable mDrawable=new GradientDrawable(Orientation.LEFT_RIGHT, new int[] startColor,endColor}); LinearLayout mLayout=(LinearLayout)findViewById(R.id.your_id); mLayout.setBackgroundDrawable(mDrawable); ...
How to display a smoother gradient in HTML5 canvas?
html5,canvas,transition,gradient,smooth
Use a s-slope based gradient which could be defined using an ease-in-out function. This way the transition between flat and linear is smoothed out. You may need to compensate a little on the width as initial and final values are closer to the flat values than in the linear approach....
AffineTransform translate differnet Graphics Object
java,swing,gradient,paintcomponent,affinetransform
Transformation's are compounding, so, once you apply a transformation, you need to reverse it when you're done. Now, you can do this manually, or you could just create a copy of the Graphics context before hand and dispose of it when you done. This prevents any changes you make to...
Gradient through all RGB colors
Maybe not the answer you're asking for because it's not RGB value based - but if you want to go through all colors, why not use HSB? Red: UIColor(hue: 0.0, saturation: 1.0, brightness: 1.0, alpha: 1.0) Cyan: UIColor(hue: 0.5, saturation: 1.0, brightness: 1.0, alpha: 1.0) Red Again: UIColor(hue: 1.0, saturation:...
Android Gradient on Lollipop not working. - API 21
android,gradient,android-5.0-lollipop
It is a bug. Check this here: https://code.google.com/p/android/issues/detail?id=77862 ...
Heatmap style gradients in .NET
c#,.net,gradient,system.drawing,alphablending
Yes this is possible with < 100 lines of .NET and GDI+ drawing code..: You need to change two things in your code: You need to fade the point areas to transparent, so you can add them You need to use a grayscale gradient so you don't create wrong, maybe...
Core Plot: Creating a CPTImage with imageWithCGImage
ios,objective-c,gradient,core-plot,cptimage
Set the scale of the image. CPTImage *image = [CPTImage imageWithCGImage:img.CGImage scale:img.scale]; If you're using the latest Core Plot code (after release 1.5.1), you can load the image directly: CPTImage *image = [CPTImage imageNamed:@"orange_bar_graph"]; ...
iOS8: Auto-layout and Gradient
swift,ios8,autolayout,gradient
Simply do it this inside viewDidLayoutSubviews: override func viewDidLayoutSubview() { super.viewDidLayoutSubviews backgroundColor.frame = self.graphView.bounds } viewDidLayoutSubviews should be called when you rotate the device. If it is not called, override this method and do it as, override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator) backgroundColor.frame = self.graphView.bounds...
Color gradient based on int
You can #define a limited set of discrete values, only the ones you need, and use them in your code instead of creating colors on the fly. Eg.: #define VAL_GREEN 0x00FF00L color generation is commonly implemented using three unsigned short int to represent RGB values - ranging from 0,0,0 to...
D3 transition: Fading in and out the colors within a gradient fill
javascript,svg,d3.js,transition,gradient
If you were using solid color fills, it would be straightforward to transition them to gray and then back to color -- just use the d3 transition of the fill property instead of the fill-opacity and stroke-opacity properties. However, the colors in this case aren't actually associated with the elements...
How can I create tilt shift alpha mask on the fly?
I created this gradient with the code below. linearGradient = new LinearGradient(0, 0, 0, h, new int[]{0xffffffff, 0xffffffff, 0x00ffffff, 0x00ffffff, 0xffffffff, 0xffffffff}, new float[]{0, 0.30f, 0.45f, 0.55f, 0.7f, 1.0f}, Shader.TileMode.CLAMP); ...
Transaparent black gradient shape drawable color code
android,gradient,shape,android-drawable
What about this gradient? Full transparency at top to 50% transparent black at bottom <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#00000000" android:endColor="#80000000" android:angle="270" android:dither="true" /> </shape> ...
Set gradient behind UITableView
ios,uitableview,swift,gradient
You need to create background view and assign it to cell: func setTableViewBackgroundGradient(sender: UITableViewController, _ topColor:UIColor, _ bottomColor:UIColor) { let gradientBackgroundColors = [topColor.CGColor, bottomColor.CGColor] let gradientLocations = [0.0,1.0] let gradientLayer = CAGradientLayer() gradientLayer.colors = gradientBackgroundColors gradientLayer.locations = gradientLocations gradientLayer.frame = sender.tableView.bounds let backgroundView = UIView(frame: sender.tableView.bounds)...
Background gradient in border?
css,css3,border,gradient,shape
Here's an svg equivalent with linearGradient instead of a single color. <svg width="200" height="200"> <defs> <linearGradient gradientUnits="userSpaceOnUse" id="gradient" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0%" stop-color="red" stop-opacity="1" /> <stop offset="100%" stop-color="yellow" stop-opacity="1" /> </linearGradient> </defs> <path d="M0,0 L200,0 L200,200 L 0,200z" /> <path d="M75,20 h100 l-100,100" fill="url(#gradient)" /> <path d="M125,80 v100...
drawing gradient over rectangle in swift
You need to specify a clipping path right before drawing the gradient. In your case, create a rectangle path and call CGContextClip(context) CGContextAddRect(context, CGRect(...)) CGContextClip(context) CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0) The gradient will be clipped to the rectangle....
Gradient - Cross Browser uniformity
css,css3,cross-browser,gradient
In fact the body does not have explicit height set, by default its margin is about 8px, so its height is just about 8px. Here in this demo, we set background-repeat to no-repeat, you'll see why by default (repeat) it renders to what you saw. However I have to admit...
CSS Gradient Restarting in Multiple Boxes
css,colors,gradient,linear-gradients
You need to add html, body {height:100%;} to your style to force the browser to render the html parent tag at full height. Currently it's rendering only about 100px tall and the body background is repeating. See this update fiddle for example....
Issue creating map shading in Matplotlib imshow by setting opacity to data gradient
python,matplotlib,gradient,opacity,pixel-shading
First of all, Matplotlib includes a hill shading implementation. This calculates the intensity by comparing the gradient with a light source at a certain angle. So it's not exactly what you are implementing, but close and may even give better results. Ran Novitsky has made another hill shading implementation that...
Fade the end of the text
or just add left background: -webkit-linear-gradient(`left`, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); section { position: relative; } .fadeout { position: absolute; right: 0; bottom: 0; width: 100%; height: 50%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background-image: -moz-linear-gradient(left, rgba(255, 255, 255,...
CSS Border Gainsboro from IE7 to other browsers
html,css,cross-browser,border,gradient
FWIW, it worked fine for me with this code: table{ border-bottom: gainsboro 5px inset; border-left: gainsboro 1px solid; background-color: gainsboro; border-top: gainsboro 1px solid; border-right: gainsboro 5px inset; } The catch is you hadn't set a width for the right border, and the background color is the same as the...
C++AMP Computing gradient using texture on a 16 bit image
c++,opencv,c++11,gradient,c++-amp
Your indexes are swapped in two places. int x = idx[0]; int y = idx[1]; Remember that C++AMP uses row-major indices for arrays. Thus idx[0] refers to row, y axis. This is why the picture you have for "For x" looks like what I would expect for texR.set(idx, valY). Similarly...
Make CSS of Gradient from image style
Try this: body, html { width: 100%; height: 100%; margin: 0; background: -webkit-radial-gradient(top left, ellipse, #917871 0%, #c7ac8f); background: -moz-radial-gradient(top left, ellipse, #917871 0%, #c7ac8f); background: radial-gradient(top left, ellipse, #917871 0%, #c7ac8f); background-attachment: fixed; } .speckle { background-image:...
Gradient Border Causing the Border to Disappear
You could do this by applying linear-gradients to :after and :before :pseudo-elements. .title h3 { display: table-cell; white-space: pre; padding-right: 7px; } .title-container { position: relative; display: table-cell; vertical-align: middle; height: 6px; width: 100%; } .title-container:after, .title-container:before { position: absolute; content: ''; left: 0; top: calc(50% + 3px); width: 100%;...
finding value of a point between measured points on a 2D plane
This is the same algorithm for interpolating the height of a point from a triangle. In your case you don't have z values for heights, but some other float value for each triangle vertex, but it's the same concept, still 3D points. Where you have 3D triangle points p, q,...
Reversing gradients with Compass
I don't know Compass, so I can help you with the Compass syntax, but the CSS should be div { width: 300px; height: 300px; border: solid 1px black; } .test { background: linear-gradient(180deg, #f1693c 0,#f1693c 80px,#f37744 81px,#f37744 122px,#f4824a 123px,#f4824a 163px,#f68d50 164px,#f68d50 50%) top center / 100% 50% no-repeat, linear-gradient(0deg, #f1693c...
Two gradients with two distinct sections with just one div element
You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class .test { width: 400px; height: 300px; border: solid 1px black; position: relative; overflow: hidden; } .test:after { content: ""; position: absolute; width: 160%; height:...
Procedural generation of a constrained landscape
3d,gradient,terrain,perlin-noise,procedural-generation
How can I improve the Perlin Noise algorithm, so that along this curve the noise will have a preferred range of values (or, for simplicity, value 0)? This can be achieved by transforming each pixel in the map through a simple p -> f(p) mathematical function. Consider a function,...
How to dynamically update linear gradient to area in HighCharts?
javascript,highcharts,gradient,stacked-area-chart
First of all you don't have the chart variable when you use chart.series[0].update. You can get it by using: Highcharts.charts[0].series[0].update See the console for errors, it shows that chart is undefined. And for stops you are using the wrong format. Use it like this: stops: [[0, '#c74350'], [1, '#fe7676']] Here's...
Looking to code a gradient filled Tile in Java
To draw the flood plains instead of one-coloured rectangle g.setColor(Color.cyan); g.fillRect(i*10, e*10, 10, 10); I would use two triangles g.setColor(Color.cyan); int[] plainX = { i * 10, i * 10 + 10, i * 10 }; int[] plainY = { e * 10, e * 10 + 10, e *...
Targeting SCSS variables in JS
javascript,jquery,scroll,sass,gradient
You can't talk to Sass with JavaScript (Unless you have a very unique set-up going on. If so, tell us what it is.) because JavaScript occurs in the user agent (browser) while Sass is compiled in the back end into CSS, and it's the CSS that is delivered to the...
Create Gradient Background in HTML
A simple linear gradient, from top to bottom (#6e6e6e to #313131), for the body tag: body { background: -webkit-linear-gradient(#6e6e6e, #313131); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#6e6e6e, #313131); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#6e6e6e, #313131); /* For Firefox 3.6 to 15 */ background: linear-gradient(#6e6e6e, #313131);...
Draw a scale which ranges from red to green in Tkinter
python-3.x,colors,tkinter,gradient
Without the generalization or general aesthetics of the above code, I offer you a simple solution (implemented against the red to green gradient) here: import tkinter def rgb(r, g, b): return "#%s%s%s" % tuple([hex(c)[2:].rjust(2, "0") for c in (r, g, b)]) root = tkinter.Tk() root.title("Gradient") gradient1 = tkinter.Canvas(root, width=255*2, height=50)...
Blocky gradient effect in CSS3
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...
Easy Div and Linear Gradient CSS
html,css,gradient,linear-gradients
Set the html's width and height to 100% as well. body, html { height: 100%; width: 100%; margin: 0; } body { background-color: black; } #grad1 { height: 100%; width: 100%; background: linear-gradient(red, blue); } <div id="grad1"></div> ...
Linear gradient css3
css3,gradient,linear-gradients
background-color: @border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it. Your syntax is wrong: /* incorrect */ -webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%); ^^ /* correct */ -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%); Here's a demo: hr...
Matlab function that returns gradient
I think this is what you want to do: function [y, gra] = f1(x) [email protected](x) x^2; y=f(x); %// calculate y syms z %// initialise symbolic variable gra=gradient(f(z),z); %// symbolic differentiation This will return g as a symbolic function. To calculate a value, you can use subs(gra,z,123), or, if you are...
Animate “fillLinearGradientColorStops” of a shape
javascript,kineticjs,gradient,tween
From there: https://github.com/ericdrowell/KineticJS/issues/901 You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/ No plans for direct support of tweening color stops on a gradient fill. var stage =...
Algorithm for a diagonal non-linear gradient
You lucked out, this is the sort of puzzle that I can't resist. Analyzing the image, two things leap out. r = g = b, i.e. this is a pure grayscale image. r + a = 255. This simplifies things greatly, it means you only need to analyze one channel...
CSS - size only the background image, not the gradient
css,image,background,size,gradient
Comma Separate the background-size values background-size: 50% auto, cover; .window-close { margin-right: 3px; background: rgba(234, 145, 116, 1); background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -moz-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%); background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 145, 116, 1)), color-stop(100%, rgba(205, 74, 30, 1))); background:...
Border (outline) on gradient border
This is not an ideal solution, but we can play with color stops and use ::before/::after pseudo-elements to fake the borders as follows: (Vendor prefixes omitted due to brevity.) div { width: 150px; height: 50px; background: linear-gradient(315deg, transparent 10px, red 10px, red 12px, black 12px); border-top: 2px solid red; border-left:...
CSS Gradient animation not working
Yup.... You've got to close off your body css and have your keyframe animations in their own accord. Like this http://jsfiddle.net/9s9g6ktu/1/
Add shade gradient to the bottom of a uitableviewcell / uiimageview
ios,objective-c,swift,uiimageview,gradient
Add this class into your project (swift): class UIGradientImageView: UIImageView { let myGradientLayer: CAGradientLayer override init(frame: CGRect){ myGradientLayer = CAGradientLayer() super.init(frame: frame) self.setup() addGradientLayer() } func addGradientLayer(){ if myGradientLayer.superlayer == nil{ self.layer.addSublayer(myGradientLayer) } } required init(coder aDecoder: NSCoder){ myGradientLayer = CAGradientLayer() super.init(coder: aDecoder) self.setup() addGradientLayer() } func getColors() -> [CGColorRef]...
Javascript canvas gap after fill of shapes with common border
javascript,html5,canvas,html5-canvas,gradient
When you deal with gradients involving transparency you'll run into overlaps where alpha channel values will multiply as well as sub-pixeling, and rounding errors for the points and possibly also for gradient calculations. Chances are that the calculations you do in the code has to be rounded off properly. If...
CSS transition causes lag
jquery,css,transition,gradient,lag
You can do this to prevent the transition when clicked but note that this will disable the transition when hovered again with the over class. .over { transition: none; -webkit-filter: blur(3px) opacity(0.3); } To keep the transition, you could do $(document).ready(function () { $("#one").click(function () { setTimeout(function () { $("#one,...
CSS issue with background button [duplicate]
html,css,button,background,gradient
The issue is that you are using the background shorthand property so trying to apply a second background image merely overwrites the previous statement (the gradient). You can use comma separated background image statements like this. CSS .btn{ background-image: /* note bg image */ url(http://lorempixel.com/output/abstract-q-c-32-32-2.jpg), linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1)...
Matching a Color Gradient to Data in Gnuplot
time,plot,colors,gnuplot,gradient
You can e.g. use a function which calculates the colors depending on the iteration counter # values r, g, b, x must be in the range [0:1] rgb(r,g,b) = (255*r*256**2 + 255*g*256 + 255*b) grad(x) = rgb(1 - x*0.7) set style data lines plot for [n=2:11] 'data.dat' using 1:2 lc...