Is there a way to do gradients in css/html/javascript only that will work across all the major browsers? (MS IE 5+, Firefox, Opera, Safari)?
Edit: I would like to do this for backgrounds (header, main panel, side panels). Also, would like to have vertical line gradients as well.
Edit: after reading the responses, let's open this up to Javascript solutions as well, since HTML/CSS by itself makes it tougher to achieve.
I've done this before as a gimmick, using javascript like:
var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.width='100%';
div.style.height = 1/count+"%";
div.style.top = i/count+"%";
div.style.zIndex = -1;
parent.appendChild(div);
}
If your requirement is just to have a gradient, you really should use a gradient image set as background-image in css. In my case, I was animating the colors and position of the gradient as well. I can't vouch for now cross-browser it is (for starters, make sure the parent has some position applied, otherwise it won't be a position-container for the absolute positioning.
I'm unclear on the implementation details you are seeking (such as background, or just a border along the side of the window, etc); however, it's possible albeit a little tedious.
One example that comes to mind would be to have n-block level elements, such as divs, and then give them each a small height (a couple of pixels, for example) and then gradually change the background color of each subsequent element.
I use the gradient CSS code generator by colorzilla: http://www.colorzilla.com/gradient-editor/
It has polyfills for IE - but not sure how far back it goes.
I think the short answer is no.
You can create something that looks like a gradient using only css, but to then use it like an image background... I think that is pushing it a bit.
EDIT (feeling silly)
I found the solution: http://en.wikipedia.org/wiki/JPEG
There are lots of ways to create a gradient now.
1. You can create image for it.
2. Use CSS3 Gradient, it can be linear, radial and repeating.
Syntax for linear :
linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);
Syntax for radial :
linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);
For IE6 to IE 9 we can use the filter property or you can also use CSS3Pie.
Following are some referances that will help:
Mozilla MDN
CSS3File
Related
I've been running into a pretty consistent problem with how views inside HStack work, with a simplified screenshot to exemplify the issue.
My expectation would be for the width of the green to basically be (expressed like an equation):
Section.width - Image.width
The section width is fluid, and the image width is explicit. Surely that means the green should be correctly calculated?
Any help with what seems to be a basic misunderstanding on my part would be hugely appreciated.
Actually you're right, but there are just default List/Form insets, which can be either changed or removed.
So all you need is
that gives on Xcode 13.4 / iOS 15.5
The height property in your frame for the image is messing with width dimensions. By setting the maxHeight to be infinity, the height property will expand the image to the max possible height, meaning the height of the section, even if it changes the width. You can think of it as, in a way, overriding the ability of the text to stretch its full width.
To fix this, consider changing the maxHeight property by adding a set height, or play around with different types of frames dimensions.
I know this doesn't talk about HStack's specifically, but feel free to check out this video to learn more about layout: https://www.youtube.com/watch?v=zczHBLtpRZo
If you want to launch an app on the app store, you may want to consider learning Geometry Reader to have dynamic dimensions across different screen sizes. This is a tutorial from a really good website, hacking with swift: https://www.youtube.com/watch?v=WNO1b58k7zg&t=505s
Let's take the horizontal sprite of images of my previous question:
So, I have 4 images in 1. Let's say that I want to use only the green circle for styling a QComboBox arrow. I know I can style it with a single image with
QComboBox::down-arrow {
image: url(:/downarrow.png);
}
but is it possible (in the stylesheet or by another means) to get only a piece of the image used?
Unfortunately that is not possibile with Qt Style Sheets, since they do not support absolute values for background-position, as stated in the documentation
The answer to the linked question is still the best way to implement this with Qt.
I currently have the following working fiddle
var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);
I animate a circle along a line.
I also want to make the circle flash at the same time but I can't seem to work out a way to do this?
I thought about adding the circle to a set and applying the additional animation to this but I can't see to get this either!
Any ideas?
This is a hack and I make no attempt to hide it, but it could be made a bit nicer.
There's a couple of problems depending on 'how' you want to animate the flash. The main problem is having 2 simultaneous animation on the same object, as Raphael doesn't do this (to my knowledge). Its easier if you want to animate an alternate attribute than the same one. If you want to animate a scale to indicate a flash, you will need to append the scale transform to the end of the path transform string ('t,s').
Example here, just uses opacity attribute.
Probably the nicest method would be to include something that figures out time running and amends an attribute manually within the animation function (paper.customAttributes.progress). However, that will probably take a bit longer.
Another alternative could be to animate another object off screen, that does all the calculations for you. It feels a bit ugly, but should work.
So earlier we create a dummy object off screen...
var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });
Within the progress func, you can then set the real circles opacity to be the same as the offscreen one.
this.attr('opacity', dummy.attr('opacity'));
And we get the dummy animation triggering later
dummy.animate(flashingAnim);
jsfiddle
As mentioned, I think there are cleaner ways, but may involve you writing a small linear animation func separately, but this may help if performance isn't an issue and you don't mind extra elements in the dom.
An alternative solution that I came up with is a looping callback. The very sound of a looping callback sounds ugly but I guess thats what an animation is?
It does appear that you can attach multiple animations to an element! Here's a an example
function animateIn() {
flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
}
function animateOut() {
flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
}
animateIn();
I want to style my chart in BIRT Designer Pro such that I have a color gradient moving across the bars. I know this can be accomplished using the format chart editor and adjusting the series palette to have a color gradient, but this doesn't achieve quite what I want to accomplish. My chart looks like this currently: You can see that the gradient moves across all the bars from start to finish no matter how long the bars are. In reality, what I want to accomplish can be seen in this Photoshop render:
In this image you can see how the gradient depends on how long the bar is and does not extend all the way between both colors of the gradient. Is it possible to do something like this in BIRT via scripting?
This turned out to be very simple to fix in the BIRT Designer. All that was needed was a custom theme with the following Highcharts.js needed to style it:
color: {
linearGradient: [0, 0, 0, '100%'],
stops: [
[0, '#FCB314'],
[1, '#EF6F00']
]
}
The crucial piece of this was the addition of the 100% when specifying the gradient in the first place.
Does anyone have an idea of how to get a glow to show up on text? I thought it would be pretty easy to do so but nothing is rendering on the fiddle.
Fiddle
Thanks
It looks to me as though Raphael simply does not support text glow. Check out the first lines of the glow function:
if (this.type == "text") {
return null;
}
It might be worth your while to investigate the use of print with a Cufonized font -- it'll return a path representing the text you give it instead of a tspan, and glow can be applied to paths.
Or you could settle for creating a simple drop shadow.
I've staged both of these alternatives by way of demonstration here.
You could create a rectangle behind the text and make that glow. I think that should look just fine. Use getBBox() to find out the size of the rectangle you need.
Something like this: http://jsfiddle.net/7ZPtq/51/
Or maybe use some other primitive, e.g. line.