Menu
  • HOME
  • TAGS

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

r,time-series,gradient

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

python,matplotlib,gradient

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

html,css,css3,gradient

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

jquery,gradient

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

r,colors,gradient,plotrix

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]

html,css3,border,gradient

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

c#,xaml,progress-bar,gradient

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

php,image,gd,gradient

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

svg,gradient,clip-path

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

r,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

java,swing,drawing,gradient

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

html,css,gradient

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

android,gradient

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

javafx,gradient

You can interpolate the color yourself: Color imageColor = Color.GREEN.interpolate(Color.RED, value / 100.0); ...

plot gradient colours of stack without ggplot2

r,plot,gradient,raster

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?

css,svg,d3.js,gradient

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

r,plot,gradient

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

html,css,background,gradient

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]

computer-vision,gradient

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

css,gradient

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

css,css3,sass,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?

css3,gradient

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?

css,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)?

css,background,gradient

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

html,css,gradient

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?

android,colors,gradient,shape

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

ios,swift,gradient,uicolor

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

c,colors,gradient

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?

android,canvas,gradient

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

ios,swift,draw,gradient

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

css,gradient

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

css,css3,gradient

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

css,css3,border,gradient

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

geometry,gradient,geospatial

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

css3,gradient,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

html,css,css3,gradient

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

java,gradient

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

html,css,gradient

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

css,css3,gradient,css-shapes

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

matlab,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

image,algorithm,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

css,border,gradient

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

html,css,css3,gradient

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