Use CSS3 to make text, picture reflection

Box-reflect Syntax:

Box-reflect:none | <direction> <offset>? <mask-box-image>?

<direction> = Above | below | Left | Right

<offset> = <length> | <percentage>

<mask-box-image> = None | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

Default value: None

Apply to: all elements

Inheritance: None

Because this property is not a standard-only property, you need to add the browser's private properties, depending on your browser's compatibility, to add-webkit and prefixes when using Box-reflect:

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?

Box-reflect:none | <direction> <offset>? <mask-box-image>?

Take value:

None: No Reflection

<direction> Demo: Simple picture reflection with Webkit

Above: Specifies that the reflection is above the object

Below: Specifies that the reflection is below the object

Left: Specifies that the reflection is on the left-hand side of the object

Right: Specifies that the reflection is on the right-hand side of the object

<offset> Demo: Picture and reflection interval with Webkit

<length>: Defines the spacing between the reflection and the object with the length value. Can be a negative value

<percentage>: Use percentages to define the spacing between the reflection and the object. Can be a negative value

<mask-box-image> Demo: More authentic picture reflection and gradient of inverted text with Webkit

None: No mask image

<URL>: Specifies the matte image using an absolute or relative address.

<linear-gradient>: Creates a matte image with a linear gradient.

<radial-gradient>: Creates a matte image with a radial (radioactive) gradient.

<repeating-linear-gradient>: Creates a back mask image with a repeating linear gradient.

<repeating-radial-gradient>: Creates a matte image with a repeating radial (radioactive) gradient.

Picture reflection:

Suppose we need to do a reflection on a picture, the structure is actually very simple:

According to the previous syntax, to let the reflection on the right side of the object, we only need to give the Box-reflect property value to be OK:

. box-reflect img {

-webkit-box-reflect:right;

Box-reflect:right;

}

Effect as shown:

Text reflection:

To get the reflection underneath the object, we just need to give the Box-reflect property a value of below:

-webkit-box-reflect:below;

Box-reflect:below;

Records/Memories

Special Note: In this example, we do not provide a blank area for the reflection, so the following line occupies the position, to solve this problem, we have to provide a blank area out, using margin:margin:20px 0;

Records/Memories

The spacing between the reflection and the object:

After you know the direction of generating the reflection, let's look at the second property value <offset>. Sometimes we may have such a demand, although I will create a reflection, but I want to make the generated reflection and objects (original image) between a certain amount of space. So this time we need to use the second attribute value <offset> in the Box-reflect attribute.

Take an example to do a demo, assuming that the object generated by the reflection at the bottom, and need to let the generated reflection from itself has a 20px spacing, at this point we only need to do this:

. box-reflect img {

-webkit-box-reflect:right 20px;

Box-reflect:right 20px;

}

Effect as shown:

Add a mask effect to the reflection:

Left and right reflection:

-webkit-box-reflect:left 1px-webkit-gradient (linear, 0% 100%,100% 100%,from (RGBA), to (white));

-webkit-box-reflect:right 1px-webkit-gradient (linear, 0% 100%,100% 100%, from (RGBA));

Upside Down Reflection:

-webkit-box-reflect:above 1px-webkit-gradient (linear, 0% 100%,100% 100%, from (RGBA));

-webkit-box-reflect:below 1px-webkit-gradient (linear, 0% 100%,100% 100%, from (RGBA));

Font reflection:

-webkit-box-reflect:below 1px-webkit-gradient (linear, 0 0, 0 100%, from (Transparent), Color-stop (. 5, transparent), to (R GBA (3,3,3,.2)));

Text Gradient + Reflection:

-webkit-box-reflect:below 1px-webkit-gradient (linear, 0 0, 0 100%, from (Transparent), Color-stop (. 5, transparent), to (R GBA (3,3,3,.2)));

Background:-webkit-linear-gradient (Top, Rgba (174,188,191,1) 0%,rgba (110,119,116,1) 50%,rgba (10,14,10,1) 51%,rgba ( 10,8,9,1) 100%);

-webkit-background-clip:text;-webkit-text-fill-color:transparent;