Hello guys.
I have a problem. Used gradient color text a page that didn’t work in IE 11. The other browsers are fine. Only, every time, always, the IE made me sick.
.rainbow {
background: linear-gradient(to bottom, #828bdc 10%, #636aab 40%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} /* gradient text */
http://ledsignkorea.com/hello-elsign-menu/
What should I do? #internet exploder browser 11
Hi There,
Thank you for writing in, regretfully the -webkit-background-clip: text; property is not supported with IE. Please use svg mask instead.
Hope it helps,
Cheers!
Hi friech,
Thank you for your good advice. I’ll try to use svg mask.
Cheers!
You’re welcome, glad we could help.
Cheers!
Could you tell me how can chrome keep showing gradient text and IE showing text in violet? I mean showing different text color each other. I want it still text, not images or svg mask. 'Cause using the automatic translation function on the website.
Hi again,
You can apply CSS to IE only by using the no-preserve3d selector, for example if you’re using the following code for Chrome:
.x-block-grid-item span {
color: #828bdc;
}
Then for IE to apply different color, you can use the following code:
.no-preserve3d .x-block-grid-item span {
color: #000;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.