How get old google logo effect on mozilla browsers?

Question

I developing a web page that refer to google... I get a simple old google logo effect without go in complex hierarchy (check code for more) but it dont work on mozilla pre-57 (it dont support background-clip css)... I know that i can simulate same effect with svg but i want know if exists another clean method... This is code:

https://code.sololearn.com/WOn15I9E0VH5/?ref=app

Answer 1

Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text only with prefix. For Firefox android this CSS property is implemented in version 57. So it won't work in pre-57 versions. Check out the browser compatibility.

https://caniuse.com/#search=background-clip

For older versions either you can use pure SVG or a pollyfill as an alternative.

https://github.com/TimPietrusky/background-clip-text-polyfill

Answer 2

Maybe this works as an alternative?

https://hashnode.com/post/alternative-to-css-clip-path-cikqx3y2e01of6v53z89g2z1v

Answer 3

Xan Thanks but its not appropriate to my context... In practice i want apply a gradient to a text but my method dont work in mozilla ... Run my code on android or chrome and see code for understand

Answer 4

Ranjan I know this but i want know if exist another "cleaner" way/hack/method for get same effect without js or messy html hierarchy (i update my code) and that work in major browsers... Thanks for your help

Answer 5

how do i get the logo in my fake google code to show up on the mobile?