Check out this fiddle: http://jsfiddle.net/sajYc/
The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?
Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work.
Unfortunately, this is a known issue in Webkit browsers and IE:
http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
However, fading between image sprite states is do-able in jQuery. This tutorial gives a good run down:
http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/
Related
I am trying to add a background image to a button, which already has gradient. But it appears to be not working.
Here is my CSS:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',
endColorstr='#131313',GradientType=0),
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./media/images/mail.png");
I have also tried with -ms-filter but did not work.
This issue is only with IE8.
IE8 does not support multiple backgrounds natively.
You might try a polyfill CSSPie
I dont know if even using PIE you can mix images and gradients on an image.
An easier solution would be to have the button use the gradient and you could add a <span> element inside the button which would have as a background your png image.
Also, you could write your CSS such that only IE8 is targeted to show and load an image within the <span>.
I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover).
In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation.
In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct.
In IE10 I get the same transition as FireFox, but no smooth transition.
I am trying to get CSS3 behavior on IE8 using the .htc file
So there are two things that I am applying on the same element (rounded corner & gradient)
But for some reasons, I cannot get the two effects to work simultaneously: the gradient is applied, but rounded corner is not. It works if I apply the class individually (i.e. only rounded corner OR only gradient).
You can see the page at
http://uiux.atwebpages.com/skeletal.html
(See the Curriculum/Classes divs)
Not possible to tell without looking at your CSS code, but there's probably a syntax error in your CSS which is causing one of them to fail. To confirm this, add a property directly below the one that fails and you should see it has no effect.
Edit: this doesn't work in IE8, but it doesn't cause my CSS to break in IE8 either.
border-radius: 10px;
Microsoft also has its propriety gradient tool:
filter:progid:DXImageTransform.Microsoft.gradient(...);
But the best way to show a gradient is to draw one on photoshop, then cut the width to 1px and use that image as a background image.
I am trying to achieve the effect which can be seen here in the lower right where the artist name and track title fade out to the right.
My first attempt was creating an overlay image, but this resulted in an ugly edge on the right because the colors would add. (maybe I can substract the images before using them?)
(this is how it looks like)
Then I searched for a CSS 3 attribute which is crossbrowser compatible. But I didn't even found a solution that works with all modern browsers.
EDIT: I am not searching for an animation. I want to have a gradient.
This seems to be very difficult to explain. I made a fiddle of how far I got: http://jsfiddle.net/z7cK2/
ANSWER: OUCH, nevermind...
is seemed I just used an old image m(
What kind of image did you try to overlay?
Method 1 (Image):
http://jsfiddle.net/R3ndb/2/
Use an absolute positioned image as an overlay.
Method 2 (CSS3 gradient):
http://jsfiddle.net/R3ndb/3/
Use an overlayed DIV with a CSS3 gradient.