css - Webkit reflection mask in Android Chrome -


desktop computer chrome

desktop

with chrome on desktop computer, can image reflection with:

img {    -webkit-box-reflect: below 0 -webkit-gradient(   linear,    left top,    left bottom,    from(transparent),    color-stop(.7, transparent),    to(white)  );   }   

android chrome

android

when tested on android's chrome, mask not mask. becomes plain overlay gradient. how turn true mask? on real website, have patterned background, plain overlay gradient wouldn't able gradually reveal background.

the android browser doesn't support webkit gradients masks on box-reflects. however, can use png masks, , avoid http request, encode them base64 use in data uri:

img {   -webkit-box-reflect: below 0    url(data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaaycayaaacuebhwaaaaikleqvq4jwp8//8/azpgwhazfrwvhbuctiisdawmxfqwbaaw4qorot0uuqaaaabjru5erkjggg==); } 

you can generate png gradient using tools http://www.display-inline.fr/projects/css-gradient/ , convert base64 http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -