How do I use this if my background is a linear gradient and not a picture?
adrianmcli opened this issue · 4 comments
I'm trying to re-create the effect found here. The example seems to show that I have to specify a lot of things for something that can be done so simply on a webkit browser.
Same here! Can the patternURL be replaced with a lineargradient by any chance? That would be awesome :)
+1. Really need to use gradient (radial, if possible) instead of image
Hello
+1
And do you think it is possible to put a transparente picture instead of army.png, or no picture, to bring up the image of the background html? As example:
body style="background-image: url("image.jpg")" div style="background-color: #000" p class="text" -webkit-background-clip: text; => lets see image.jpg instead background-color black ... /p /div /body
I tried but without success, I'm not good in JS
Thank you
Wow this is really cool. Awesome what could be done with it but I can't get it to work :/
I've just called the js from the footer and asked it to apply to the class .gold-glitter-text
Do I need to also be using Compass?
var element = document.querySelectorAll('.gold-glitter-text');
/* will use the class gold-glitter text in the footer also */
element.backgroundClipPolyfill({
'patternID' : 'gold-glitter-text',
'patternURL' : 'http://testingground.dreamhosters.com/wp-content/themes/toolset-starter-child/images/gold-glitter.jpg',
'class' : 'gold-glitter-text'
});
Sorry for noob questions!
Building a website for a not-for-profit women's circus!