3

I've been playing with the -webkit-box-reflect property in Chrome and can achieve a reflection that fades with the following code (it's example code from the Webkit blog):

-webkit-box-reflect:
  below 5px 
  -webkit-gradient(
  linear, left top, left bottom, 
  from(transparent), color-stop(0.5, transparent), to(white)
  );

Problem is, I want to set the opacity for the mask to a more subtle setting, but it seems to be choking on rgba(). Has anybody been able to successfully get different levels of opacity?

Any help is appreciated, thanks!

0

1 Answer 1

10
-webkit-box-reflect:
  below 5px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
  color-stop(0.5, transparent), 
  to(rgba(255, 255, 255, 0.5)));

Is this the code you were looking for? :)

1
  • It does not work like a charm. I added this: * { -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.5))); } to the current page and Safari went slow.
    – user142019
    Feb 6, 2011 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.