I am trying to code a button where, on hovering, will produce an ease-in-out effect. I used the following code:
#quotebutton {
padding:20px;
margin-top:-55px;
/* fallback/image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #000, #333);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #000, #333);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #000, #333);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #000, #333);
font-size:18px;
color:#fff;
float:right;
transition: background 300ms ease-in-out;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
}
#quotebutton:hover {
/* fallback image non-cover color */
background-color: #000;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #333, #000);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #333, #000);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #333, #000);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #333, #000);
}
#quotebutton a {
text-decoration:none;
color:#fff;
}
The HTML is as below:
<div id="quotebutton">
Download Now
</div>
But the button is not showing the effect on hovering. What might be the problem?
Unfortunately, the short answer is that you can't animate background gradients with CSS3 transitions. There are a few ways that you can accomplish the same goal using alternative techniques:
Use jQuery to animate a transition between two different background images on hover. You can accomplish this most easily by stacking three elements on top of each other using absolute positioning, where the bottom two are the background images and the top contains the content, which in this case is your button text. On hover, fade out the top background image to reveal the bottom one smoothly. See this tutorial for making a background animation on hover with jQuery.
Use a semitransparent gradient background in conjunction with a webkit transition to create a partial animation. CSS3 transitions can easily animate the background-color CSS attribute, which is only visible through nonexistent or transparent background images or gradients. See this example for an idea of how you might implement this.
Of the two options, (1) is more flexible but more work and requires a companion script, while (2) is less flexible and less cross-browser compatible.
Like Ryan mentioned, you cannot animate background gradients.
Although, there are jQuery plugins that help you accomplish that.
Try jQuery Blend
Another idea I have, is to apply a linear transparent gradient image on top of a solid color.
You can then animate the solid color with transition. The transparent gradient image on the top will make it look like a gradient animation.
Hope it helps.
Cheers.
Related
I want to combine background image and gradient. It should work in IE. my image is 3px width and 3px height. I am planning to give repeat for the background. How can we done it for Internet Explorer ???
Thanks in Advance
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */
First 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.
Line 1 sets a flat background color.
Line 2 sets the background image fallback.
The rest set a background image and gradient for specific browsers.
Line 3 is for old webkit browsers.
Line 4 is for newer webkit browsers.
Line 5 is for Firefox 3.6 and up.
Line 6 is for Internet Explorer 10.
Line 7 is for Opera 11.10 and up.
Line 8 is what one day all the browsers will hopefully use.
See http://www.w3.org/TR/css3-background/#layering for more information about it.
Also see http://css3please.com for cross-browser css3 templating. Currently it doesn't allow you to do multiple backgrounds with gradients, but it gives you the browser prefixes and is kept up to date.
Stacking images ONLY (no gradients in the declaration) For IE < 9
IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:
.lte9 #target{ background-image: url(IMAGE_URL); }
If you need to target IE versions IE9 or earlier, they do not support CSS gradients.
There are work-arounds using filter and other hacks, but you will struggle to get those working if you want a background image as well.
My advice, therefore, is to use the CSS3Pie polyfill script. This library adds gradient support to older IE versions. It should be able to do what you want.
You'll end up with code like this in your CSS:
#myElement {
background: url(bg-image.png) #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png), -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png), -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png), -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png), -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*CSS3-compilant browsers*/
-pie-background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Please see the CSS3Pie documentation for further info.
In my current project, I've used CSS3 gradient in my CSS file. To support IE browser, I've used filter property as well. Following is my code:
.card.active .content.back {
background: #333; /* Old browsers */
background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
}
But when I use the filter property in the above code, the border-radius property is not working. If anyone know a fix for this, please share it with me.
Thanks
You can use PIE.htc for your desired results.
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.
http://css3pie.com/
or see the demo:- http://jsfiddle.net/ZxzSs/1/
for support PIE.htc you have to keep the PIE.htc file on your root folder than will work for your website....
You should be able to apply the gradient to a child of the element with the rounded corners. I don't have access to IE9 on my home machine but this should work:
.element {
background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
border-radius: 10px;
}
.element .ie-helper {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}
HTML:
<div class="element">
<!--[if lt IE 9]><div class="ie-helper"><![endif]-->
<p>Your content with gradient and rounded corners...</p>
<!--[if lt IE 9]></div><![endif]-->
</div>
If the page is viewed in IE10+ or other browsers, both the gradient and rounded corners will apply to same element (assuming you bring back the vendor-specific prefixes from your code sample). The inner div.ie-helper will only render on IE9 and below because of the conditional comments used.
This isn't ideal but would get the job done, but since you're after such a wide range of browsers to be fully supported this is a reasonable workaround
When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My browser is Google Chrome
See here
<button>Log In</button>
CSS:
button {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
border:1px solid #890000;
display:block;
margin:0 auto;
width:200px;
padding:5px 0;
border-radius:8px;
color:#fff;
font-weight:700;
text-shadow:0 1px 1px #000+50;
box-shadow:0 2px 3px #000+150;
-webkit-transition:background linear .5s;
}
button:hover {
background:#ff3019;
}
button:active {
background:#cf0404;
}
I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!
Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.
So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.
You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.
-webkit-transform: translate3D(0, 0, 0);
I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.
Similar Question here: Webkit support for gradient transitions
More detail: http://screenflicker.com/mike/code/transition-gradient/
The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).
If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.
Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/
Still definitely a bug tho...
I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
I changed the top color of the linear-gradient to give a noticeable change to the hover effect.
button:hover {
background: -webkit-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
background: linear-gradient(top, #ff5e4c 0%,#cf0404 100%);
}
There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.
With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.
In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.
When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s).
Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.
A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.
I solved the blinking like this:
Html as follows:
<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>
css as follows:
.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
This link fixed it for me. You just have to add a line to the css of the element that's flickering:
http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit
How would one use CSS3 gradients for a background image, and fallback to a PNG image if the gradients were not supported?
Here you go.
Browser who do not support CSS3 gradients will just use the image.
div {
background-color: #1a82f7; /* fallback color */
background-image: url(images/linear_bg_2.png); /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
Blog post about it on CSS Tricks
I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
The code I use for all browser gradients:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.gradient(#start, #end) {
background: mix(#start, #end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#start~", EndColorStr="#end~")";
background: -webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background: -webkit-linear-gradient(#start, #end);
background: -moz-linear-gradient(top, #start, #end);
background: -ms-linear-gradient(#start, #end);
background: -o-linear-gradient(#start, #end);
background: linear-gradient(#start, #end);
zoom: 1;
}
Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx
The filter style should work for IE8 and IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.
So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.
background-image: url('/Content/Images/button-gradient.png');
There are plenty of sites you can use to quickly generate a gradient background; I use this.
Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers:
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Just thought I'd add this useful link: http://css3please.com/
Shows how to get gradients working in all browsers.
Note that IE10 will support gradients as follows:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Right from ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Try this:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Two things I discovered while struggling with IE 9 gradient.
The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.
In my case I inserted it on header section
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then in style section insert it
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;