search

TimPietrusky / background-clip-text-polyfill

A SVG polyfill for -webkit-background-clip: text
132 stars 30 forks source link

How do I use this if my background is a linear gradient and not a picture? #5

Open adrianmcli opened 9 years ago

adrianmcli commented 9 years ago

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.

remkodejong commented 9 years ago

Same here! Can the patternURL be replaced with a lineargradient by any chance? That would be awesome :)

NeXTs commented 8 years ago

+1. Really need to use gradient (radial, if possible) instead of image

ghost commented 8 years ago

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

Back2Front commented 8 years ago

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!

Test Site