CSS Reflections

CSS Reflections are a feature of WebKit-based browsers (e.g., Safari and Chrome). If you are using something else (e.g., Firefox or Internet Explorer), you probably won't see anything interesting below.

Mostly, I made this page to test whether this works on iPhone. It does.

Auckland Graffiti

Here is the style declaration that produces the effect:

#container img {
   -webkit-box-reflect: 
      below 2px 
      -webkit-gradient(linear, left top, left bottom, 
         from(transparent), color-stop(0.5, transparent), to(white));
   margin-bottom: 200px;
   border: solid 4px #ccc;
}
Was this page useful to you? Loading...