If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the ‘My Services’ section of my blog: https://amarketingessentials.com/my-services/
What is a text color gradient?: 0:10
How to create a text color gradient: 1:34
Hey all!
In our previous video, we went over color gradients for a background in any element in ClickFunnels using custom CSS (https://www.youtube.com/watch?v=mtefjJKwb2s&t=26s&list=PLS46f4aLJ2hNASorSJ04itRrhsnZ00x5u&index=24).
However, I did mention that it would not be as simple as changing the FONT gradient color as we did for the background – and that’s because there is no such specific property yet in custom CSS, and we have to do a walkaround – that works on some browsers and not others.
What we basically have to do is to create a background color as we did in our last ClickFunnels video, create the text on it to be transparent, and clip everything from our background except that text.
The properties ‘background-clip’ and ‘text-fill-color’ are not accepted in all the browsers, so we need to add prefixes before each property to ensure that it works in the browsers of our choice. For example we would write ‘-o-‘ for Opera, ‘-moz-‘ for Firefox, and ‘-webkit-‘ for Chrome. Unfortunately, these commands don’t seem to work in Internet Edge at all and I have not found a way yet to make this text gradient work there.
But for Chrome, after we create our text in text editor, we can type the following sequence of properties to get this to work after we select our element ID: ‘{background:linear-gradient(to right,blue,red); -webkit-background-clip:text;-webkit-text-fill-color:transparent;}’. What we have done here is created a gradient on our text going from left to right starting from blue to red, by making our text transparent and thus seeing the background color by clipping everything except that text.
If this doesn’t work, try out some of the other declarations for other browsers, which you can find here: https://www.w3schools.com/csS/css3_gradients.asp.
The one we have written above should work for Firefox, Chrome, and Opera at least.
That’s it!
Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!
If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
https://go.ivanmana.com/clickfunnels
If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition
If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
https://go.ivanmana.com/ClickMagick
Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439
Like my Facebook page!: https://www.facebook.com/onlinemarketingessentials
Thanks for watching, and I’ll see you in the next video!
source