I am using jqwidgets. In those widgets i am using radial gauge. For that radial gauge i want to give radial background colour. i have got a code something like this for changing background color in radial gauge.
$('#gauge').jqxGauge({ style: { fill: '#cccccc', stroke: '#cccccc' }});
In the above code i have tried something like this,
$('#gauge').jqxGauge({ style: { fill: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)', stroke: 'linear-gradient(to top, #000 19%, #000 41%, #232323 49%, #fff)' }});
But this isnt working. Please help me.
Thank you.
I don't think CSS gradients work as SVG fills.
So you will need to define your gradients in an SVG you embed in the page. Then you can reference them for your gauge.
So, for instance, the equivalent SVG gradient definition for your fill one would be:
<svg width="0" height="0">
<defs>
<linearGradient id="gaugefill" x1="0" y1="1" x2="0" y2="0">
<stop offset="19%" stop-color="#000"/>
<stop offset="41%" stop-color="#000"/>
<stop offset="49%" stop-color="#232323"/>
<stop offset="100%" stop-color="#fff"/>
</linearGradient>
</defs>
</svg>
Put this in your page somewhere. Then you should be able to apply it to your guage with:
$('#gauge').jqxGauge({ style: { fill: 'url(#gaugefill)', stroke: '#ccccc` }});
I'll leave the stroke one for you to do.
PS. Disclaimer: I have not used these widgets, so this is an educated guess only.
Related
I would like to know if is it possible to do a gradient in the stroke color that appears in the two lines below, and is set to #389967. This is a SVG
.chart-three svg .circle-foreground {
stroke: #389967;
stroke-dasharray: 494.55px 549.5px;
stroke-dashoffset: 494.55px;
stroke-linecap: round;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
THe full source code can be found here, it's on scss, but you can compile it to CSS :
https://codepen.io/kunalkamble/pen/XXbWwN
I'm looking to change the foreground color of this chart, in order to get it gradient, do you know if that is possible ?
I would like to measure like a meter of energy consumption, when is very close to 0% is green and when it gets close to 100% is red
thanks in advance
This is doable using an image stored as an SVG pattern for your stroke, with the caveat being that you can no longer round the edges. The stroke caps technically go past the start of your element, so a sliver of the 100% value of the gradient (red) peeks in unless you remove it.
https://codepen.io/will0220/pen/xXjKry
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="fillColors" patternUnits="userSpaceOnUse" width="200" height="200">
<image xlink:href="http://willmurdoch.com/images/strokeGrad.jpg" width="200" height="200" />
</pattern>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
</svg>
Then use that as the foreground color. If you plan on using the same image I did, please save it down from the link above and re-upload it somewhere else, since it's hosted on my personal server.
I'm trying to put a radialGradient background in a SVG circle and nothing will work. It only works in Internet Explorer. Even just a solid color background won't work. I must have setup my document incorrectly. Maybe this is due to cloning from a hidden copy? The actual project can be seen here. I have it hosted here. To see the problem circle click "New Player". I'm trying now in HTML5, but I believe that I've also had this problem in xhtml.
index.html:
<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="background-color:#EEEEEE;">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<defs>
<radialGradient cx="20%" cy="20%" id="gearShift">
<stop offset="0%" style="stop-color:white;"/>
<stop offset="80%" style="stop-color:black;"/>
</radialGradient>
<style type="text/css"><![CDATA[
.gear {
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
}
]]></style>
</defs>
<circle id="gear00" class="gear" cx="70" cy="20" r="10" style="stroke:black;" fill="url(#gearShift)" />
</svg>
</div>
</body>
</html>
styles.css:
.gear{
stroke:black;
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
background-color:red;
background-image:-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
background-image:-webkit-linear-gradient(left, red, #f06d06);
background-image:linear-gradient(to right, red, orange);
}
I've commented out the following rule in styles.css which shows the Player 0 that all the other players are copied from. This allows the background of the circle to be shown. Once you've added Player 1 when switching between players, whenever Player 0 is hidden, the background on all copies of this circle are hidden.
#_00, #sort00, #playertab00, .hidden {
/*display:none !important;*/
}
Sorry, this might be a duplicate of this question. It seems like the issue stems from the fact that the background in the defs section is linked to the circle by an ID. I was cloning it and creating multiple radialGradients with the same ID.
I've fixed this by splitting the def into its own svg element.
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svgDefs" class="svgDefs">
<defs>
<radialGradient cx="35%" cy="35%" id="gearShift">
<stop offset="0%" style="stop-color:white;stop-opacity:1"/>
<stop offset="50%" style="stop-color:black;"/>
</radialGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<circle id="gear00" class="gear" fill="url(#gearShift)" cx="70" cy="20" r="10" style="stroke:black;"/>
</svg>
</body>
When using a linear gradient such as
div {
width: 300px;
height: 50px;
background: linear-gradient(to right, blue, red);
}
<div></div>
the colors could be changed via different paths.
In the example above, it could be done by just modifying linearly the R and B channel, without touching to the G one -- but the variation could also be non-linear (to provide, say, a sense of linearity because it would be more physiological), or by tinkering with the G channel (again because it might seem to be a more realistic 'red to blue transition' to our eyes).
What is the formula used in linear-gradient to switch between two colors?
Gradients in HTML/CSS are linear interpolations, purely mathematical. Per the W3C canvas spec:
Once a gradient has been created (see below), stops are placed along it to define how the colors are distributed along the gradient. The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.
SVGs work the same way.
CSS gradients are the same, except for one difference (emphasis mine):
Between two color stops, the line’s color is interpolated between the colors of the two color stops, with the interpolation taking place in premultiplied RGBA space.
So all three use linear interpolation, and canvas/SVG use non-premultiplied alpha while CSS uses premultiplied alpha (which does look nicer). As to why that makes a difference, see this example:
html, body, svg, div {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: white;
}
svg {height: 60%;}
div.gradient {
height: 20%;
margin-top: 0.2%;
background: linear-gradient(to right,
rgba(0%, 100%, 0%, 1),
rgba(0,0,0,0));
}
<svg>
<linearGradient id="a">
<stop offset="0" stop-color="lime"
stop-opacity="1" />
<stop offset="1" stop-color="lime"
stop-opacity="0" />
</linearGradient>
<linearGradient id="b">
<stop offset="0" stop-color="lime"
stop-opacity="1" />
<stop offset="1" stop-color="black"
stop-opacity="0" />
</linearGradient>
<linearGradient id="c">
<stop offset="0" stop-color="rgba(0%, 100%, 0%, 1)" />
<stop offset="1" stop-color="rgba(0,0,0,0)" />
</linearGradient>
<rect width="100%" height="33%"
fill="url(#a)" />
<rect width="100%" height="33%" y="33.5%"
fill="url(#b)" />
<rect width="100%" height="33%" y="67%"
fill="url(#c)" />
</svg>
<div class="gradient"></div>
<ul>
<li>Top: SVG gradient with constant stop-color and transitioned stop-opacity;</li>
<li>2nd: SVG gradient with stop-color transitioning to black and stop-opacity transitioning to zero;</li>
<li>3rd: SVG gradient with rgba colors;</li>
<li>Bottom: CSS gradient with the same rgba colors.</li>
</ul>
<p>All transition from opaque lime to fully transparent; in all but the first SVG gradient, the final stop is transparent black. The CSS gradient scales the intensity of the color by the alpha value before transitioning, so you don't get the fade to gray effect.</p>
Disclaimer: That's not my snippet! I took it from this CodePen example, but SO won't let me link to it without adding code myself.
I'm having trouble coming up with a pure CSS mechanism to get a particular background pattern happening.
What I'm looking for is a horizontal gradient that is also repeated vertically, with a gap between each instance. Example:
(source: howsfamily.net)
I can get the horizontal effect easily enough
background: linear-gradient(to left, white, red, white); background-size: 100% 50px; background-repeat: no-repeat; }
I can get the vertical effect (without the horizontal gradient)
background: linear-gradient(to bottom, red 0px, red 50px, transparent 50px, transparent 100%); background-size: 100% 150px; background-repeat: repeat-y;
Does anyone know how to combine the two?
Extending from comment:
Since you're already going for linear-gradient, I would suggest using an SVG for more freedom and better compatibility.
Example: http://dabblet.com/gist/6632969
The SVG that is used (beautified):
<?xml version="1.0"?>
<svg width="10" height="100" viewBox="0 0 10 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="l">
<stop offset="0%" stop-color="white" />
<stop offset="50%" stop-color="red" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<rect x="0" y="0" width="10" height="50" fill="url(#l)" />
</svg>
You can tweak the height and viewBox here and background-size in CSS to fit your need.
The preserveAspectRatio attribute here is crucial, otherwise the background image may not stretch.
Does Opera browser supports linear-gradient? What is syntax?
Thanks
No, Oper does not support linear gradient of CSS3. But, you can use svg for backgrounds. Here is content of simple svg file with gradient:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" style="stop-color: #9c0000;"/>
<stop offset="100%" style="stop-color: #590000;"/>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>
No, but it has been announced that it will very soon. My guess would be March.
AS of Aug 2011 YES, Opera does support linear gradients.
At Gradients in Internet Explorer 9 you can see the how using it.
Briefly:
/* Opera */
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);
Hope it helps you.
No but here's the best solution.
Go to photoshop, make a big ass gradient in whatever direction lets say 2560px x 20px
Use "save for website" as a jpg, using and any % of quality but save it as 2560px x 1px instead.
Use it as a background image with repeat-x or repeat-y whatever repeat is required to extend the 1px width/height....And it will barely cost you a KiloByte or two.