CSS box-reflect

Sometime ago we used to add gif images on web site to make them look cool. Now, we can use trickery as box-reflect. It’s one of the “new” css properties out there, that is not yet that widely supported. Currently only webkit browsers support it (Chrome and Safari), but there is a nasty trick to make it work also for FireFox.

For webkit use something like this:

-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);

As you can see from the example, it works also for images. Don’t forget to set some width to your box.

DEMO page

FireFox example

box-reflect

Leave a Reply

Your email address will not be published. Required fields are marked *