Box Reflection

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

The browser will render a reflection of the element under or next to it.

Syntax

The syntax is based on the Webkit core:

-webkit-box-reflect:
  _reflection_direction
  _offset_
  _mask_;

Direction of the Reflection

This is a required value with four possible choices: above, below, left or right.

-webkit-box-reflect: below;

Offset

This defines the distance of a reflection from the original object, using standard CSS units – px, em and others.

-webkit-box-reflect: below 5px;

Mask

A mask defines the reflection overlay effect. A CSS gradient is a commonly used tool for achieving the mirror effect: however, it can also be done using an image. The black area of a mask is visible, the transparent one is hidden.

-webkit-box-reflect:
  below 5px linear-gradient(to bottom, transparent, black);

Take a look at a live example at cdpn.io/e/CLEhF.

Browser Support

Box reflection is supported only by Webkit browsers. Nowdays, it works in all versions of Safari and even in Android Browser. It works even in Chrome which has its own Blink core. See caniuse.com/box-reflect

In Firefox, we can achieve a reflection effect by using the -moz-element() property. See lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/

This property is not reliable when dealing with a big target group, however, it might come in handy for internal apps with a limited target audience.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more