I am making an HTML Application (hta) on windows. I went to make a linear gradient background transition, when I realized that gradients don't have any transitions, but I decided that I would put my mind to it and do it anyway. I had made a simple animation, but when I opened the app, it worked! I have to say IE has the transition I want for linear gradients. This is what I want my background to be:
body {
animation: animat 2s infinite linear;
}
#keyframes animat {
0% {background-image: linear-gradient(to right, lightgreen, lightblue);}
50% {background-image: linear-gradient(to right, lightblue, lightgreen);}
100% {background-image: linear-gradient(to right, lightgreen, lightblue);}
}
Anyway, that gives this cool effect in IE, where it is soothing, but you can't tell the background is necessarily moving. I would appreciate it if someone could open this page in IE and let me know how to do it without background-position. Thanks, I really appreciate it.
Related
I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren't supposed to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?
You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.
I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.
If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.
If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.
In Adobe Fireworks, I would export this as a PNG-24.
Good luck.
http://codepen.io/anon/pen/JdEjWm
#gradient {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
background: -webkit-linear-gradient(top, black, white);
background: -moz-linear-gradient(top, black, white);
background: -ms-linear-gradient(top, black, white);
background: -o-linear-gradient(top, black, white);
background: linear-gradient(top, black, white);
}
I made a "scatter.png" to put with my gradient. Like this:
Open gimp
100x100 image
Add alpha channel
Filters -> Noise -> Hurl... Accept defaults
Set opactity to 5%
Save and then add to gradient.
background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
It's a subtle effect on a subtle effect.
For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.
.blur{
overflow:hidden;
filter: blur(8px);
}
I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:
This gradient produces banding:
background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);
This gradient does not, and looks much the same:
background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.
.gradient {
background: linear-gradient(
173deg,
rgba(0, 132, 255, 1) 50%,
rgba(255, 255, 255, 1) 50.5%
);
}
There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.
Add a min-height.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
}
you can also set background-repeat to no-repeat but shouldn't be necessary.
#gradient {
min-height: 100vh;
background: linear-gradient(black, white);
background-repeat: no-repeat;
}
this property seems to fix things
background-attachment: fixed;
got from this thread
I'm having trouble integrating this CSS clouds animation into my
website. The overflow: hidden and scroll are causing my problems.
I don't want the clouds scrolling outside of the blue box background area, but don't know how . Please see http://www.filehostfree.com/cloudcsstest/cssanimation.html
I've left a comment in the source code.
To avoid the scrollbar you have to add an overflow-x: hidden; into the container of the Clouds (#clouds).
Anyway I encourage you to avoid using margin or positioning properties (like left, right...) and use transform: translate() in animation to avoid repaint and gain in page performance.
In this fiddle I changed the #keyframes animation into
#keyframes moveclouds {
0% { transform: translateX(1000px);}
100% { transform: translateX(-1000px) }
}
Also have to add that you are using prefixed properties like:
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
but not the unprefixed one, that nowadays have so good crossbrowser support.
Regarding the scroll issue, this will remove the horizontal scroll.
.yourContainingDivClass {
overflow-x: hidden;
position: absolute;
}
Regarding why the clouds suddenly appear, you should add a negative X position at the beggining and at the end of the animation cycle:
#keyframes move_cloud {
0% {
left: 120%;
}
100% {
left: -20%;
}
}
You can play around with this Pen, if you want. It has been coded using SASS, therefore you can tweak the variables to meet your needs.
CSS3 animations and Internet Explorer (IE)
IE does not support CSS3 animations until IE10, therefore your animations will not render properly in any version of IE < 10. Checkout the support table.
Alternatives to CSS3
HTML5 Canvas:
HTML5 Canvas API offers a wider range of options to create this kind of animations. The performance is also better.
Javascript:
If you feel confortable using JavaScript, a good alternative would be to use TweenJS to animate the CSS properties via DOM, although the performance will not be the same.
Thanks for all the help guys. Appreciated , the overflow-x: hidden;
fixed the scroll issue, that was main issue, only other thing it don't work in IE but that don't bother me too much, chrome and firefox are fine, my site is working now
I have a list of elements that each have a linear gradient which gets animated after they load. The CSS looks like this.
li {
background: linear-gradient(to right, red 10%, white 10%);
background-size: 200% 100%;
background-position:right bottom;
-webkit-animation:colorChange;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes colorChange {
from {background-position:right bottom;}
to {background-position:left bottom;}
}
That works fine, but what I'd like to do is change the percentages per element. I tried taking out the background property and setting it as a style attribute on the element, but the animation went away in that case (it just loaded with the color already partially filled).
I am a CSS super noob so I'm probably doing something stupid. Help?
I'm playing around with a CSS3 Gradient and trying to move it in on mouseover. As you can see from this jsFiddle, the CSS gradient appears on :hover; however, it seems to flickers a few times.
FYI, so far, this has been tested on Chrome v30 / Firefox v24 / Safari v5.1.
Separately, both have turned out to be working solutions, but combined, I get the flickering effect.
nav li {
width: 90px;
padding-right: 15px;
padding-left: 15px;
height: 30px;
border: 1px solid #000;
float: left;
list-style-type: none;
background-position: -200px -200px;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
}
nav li:hover {
background-position: 200px 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(96,96,96,0.2) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(100%,rgba(96,96,96,0.2)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(96,96,96,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33606060',GradientType=0 );
}
I've tried limiting the animation using animation-iteration-count, but as I've figured out, this only seems to work with animations and #keyframes. I've also read on a few different sites that
#keyframes don't yet support CSS Gradient animation.
The flickering effect is due to the difference between your element height (30px) and the offsets you've given for the background (-200px -> 0px).
Basically, it's scrolling past the view six times in the one second transition (because 30 goes into 200 six times), which is what is giving you the flickering effect. You can see the effect more easily if you increase the transition time a bit, say to 5 seconds; this will make it more obvious what it happening. (obviously you can set it back when you're done testing)
If you change the inital background-position to -30px instead of -200px, you'll get it scrolling into view just one time, and thus no flicker.
Hope that helps.
The problem is background-repeat. You must set it to no-repeat so that the background is not visible before hover
background-repeat: no-repeat;
JSFiddle
As mentioned in other answers, the problem is background-repeat and your very large background position.
Here is an updated Fiddle with what I believe you were trying to achieve.
Note that I have removed all of the redundant CSS rules - all major browsers now support gradients and transitons without prefix, making all those prefixes useless (it should also be noted that -ms-transition and -ms-linear-gradient have never existed, because IE didn't jump the gun... did you know there are at least THREE different ways to define gradients in Chrome?)
In addition to cleaning up, I moved the background definition to the element's styles (rather than its hover styles) to ensure that a "transition out" is possible, otherwise it just snaps to blank. I have applied background-repeat:repeat-x to only allow horizontal repeating, and adjusted the background-position so that in the initial state the gradient is just barely completely off the bottom, and the hover state is such that it is in the right place. This produces a smooth and exact transition.
Hope this helps!
I have a background image in my css3 with image and gradient defined. I also want to have a transition when class changes from on_time -> too_late or vise versa.
I cannot get the transition on the gradient. Is this somehow supported in css3?
Thanks
div.too_late
{
color: White;
background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);
-webkit-transition-property: background-image, color;
-webkit-transition-duration: 5s;
}
div.on_time
{
color: #222;
background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);
-webkit-transition-property: background-image, color;
-webkit-transition-duration: 5s;
}
It's not possible to have transitions on background gradients. But you can have a look at this link to make it work with "hacks": http://nimbupani.com/some-css-transition-hacks.html
You can also make it appear like it's changing by using the background-position shift: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Here is a similar question with more links and information btw: Use CSS3 transitions with gradient backgrounds
"Gradients don't support transitions yet (although the spec says they
should). If you want a fade-in effect with a background gradient, you
have to set an opacity on the container and transition the opacity."
Source: Use CSS3 transitions with gradient backgrounds
The property background-image is not supported
http://www.w3.org/TR/css3-transitions/#animatable-css