Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Right to left gradient in iE with css - possible?

Is it possible to create a right to left gradient in IE 5-9? In IE 10 it is possible, but is it in earlier versions without using an image?

Left to right gradients in earlier versions:

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#D5D4D4, endColorStr=#FFFFFFFF, GradientType=1);

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D5D4D4, endColorstr=#FFFFFFFF, GradientType=1)";

In IE 10 there is the option to change gradient direction:

/* For Internet Explorer 10 */
-ms-linear-gradient(left, #D5D4D4, #fff 45%);  
like image 350
erdomester Avatar asked Oct 16 '12 15:10

erdomester


People also ask

Does linear gradient work in all browsers?

Cross Browser Compatibility Solution For CSS Linear Gradient. All desktop browsers including Internet Explorer 11 and Microsoft Edge provide browser support for Linear CSS Gradients, meaning these CSS Gradients offer excellent cross browser compatibility.

How do you add a linear gradient to text in CSS?

CSS Code: For CSS code, please follow the steps given below. Step 1: Apply a basic background to the body tag and align the text to center of the page. Step 2: Do some basic styling like font-size and family etc. Step 3: Apply the linear gradient property with any colors of your choice.

How do you put a linear gradient on an image in CSS?

CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

What is linear gradient CSS?

linear-gradient() The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image> .


1 Answers

Sure. Just do:

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFFFF, endColorStr=#D5D4D4, GradientType=1);

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#D5D4D4, GradientType=1)";

Serious answer: the gradient filter support two gradients types: 0 (vertical) and 1 (horizontal).

If you want to switch from right->lef to left->right , you need to switch the start and end color hex.

like image 66
Giona Avatar answered Oct 13 '22 10:10

Giona