Best Web Magazine

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I’ll show you how to use it in today’s video quick tip!

img {
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
  -webkit-border-radius: 3px;
   border-radius: 3px;
   border: 3px solid #666;
}

Similar Posts

• The Intricacy of Simplicity: CSS3
• Build Kick-Ass Practical CSS3 Buttons
• Quick Tip: The Multi-Column CSS3 Module
• Quick Tip: Practical CSS Shapes
• Quick Tip: Understanding CSS3 Gradients