Create Gold Foil Text with only CSS

[angelamaree]

Hi,

I have followed the CSS from this article http://www.theblogmarket.co/create-gold-foil-text-with-css/ to be able to overlay a gold-foil image onto my text.

I tried including the code in the header CSS and the element CSS. When I do this, instead of getting the desired outcome it creates a blur overlay across the whole header.

Question 1: is there somewhere else I should be including the CSS code?

Question 2: are you able to advise how to improve the code so that it works within Themeco? It seems to work for others.

Thanks in advance
Angela

[thai]

Hi Angela,

I’ve added the following CSS under Theme Options > CSS:

.gold-text {
    color:#c3a343;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(transparent, transparent),
    url(http://www.theblogmarket.co/wp-content/uploads/2015/11/GOLD-11.jpg) repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
}

Then add the gold-text class to the class field of both text & headline elements, it’s still working fine:

Could you please provide us with your website URL so we can take a closer look?

Thank you.

[angelamaree]

Hi thai,

Thanks! Adding the CSS to the Theme CSS worked well. The headline now has the gold foil text.
However, all other text seems to have disappeared including text box, buttons, header at top,

URL: www.healthymoney.co

[angelamaree]

Thinking about it - the text on the whole page has turned ‘transparent’ per the CSS code.

[friech]

Hi @angelamaree,

Please remove the gold-text class you applied on the Body CSS Class(es) option.

Having that on the body class means you’re applying the gold text styling to the entire page.

Please apply only the gold-text class to the specific text as Thai did above.

Hope it helps,
Cheers!

[angelamaree]

Ok thanks Friech. I’ve figured it out and it is all working nicely now

[thai]

Glad you’ve sorted it out